移动端页面使用rem来做适配

忘是亡心i 2022-05-24 10:53 181阅读 0赞

## rem介绍 ##

rem（font size of the root element）是指相对于根元素（即html元素）的字体大小的单位。  
假设根元素的字体大小是`10px`, 则`5rem`的大小为 `5*10=50px`,例如

html{ font-size: 10px; } p{ width: 2rem; /* 2*10 = 20px;*/ margin: 1rem; }

## rem来做适配 ##

以前我们往往这样做页面：viewport width 设置为 device-width，然后选我们需要兼容设备的最小宽度（一般是320px）。根据这最小宽度来做页面。单位使用`px`和百分比。在宽度不同的设备上，页面的字体大小，内容尺寸都是一样的，不同的是，大屏的内容间的空隙比小屏的大。所以这样做的缺点就是，页面在某些尺寸的设备上显示的效果不好。

如果用rem来页面，我们会根据不同的设备宽度在根元素上设置不同的字体大小。宽度越宽，字体越大。然后对原本使用`px`的地方使用`rem`来替换。这样，字体大小，内容尺寸，对随着屏幕宽度的变大而变大。

## 具体做法 ##

1 根据不同的设备宽度在根元素上设置不同的字体大小。  
为了能将设计稿中的 px 方便的转换为页面中 rem，我设置 1rem 为 宽度为 640px 的设计稿中的 100px。代码如下

; (function(win) { var doc = win.document; var docEl = doc.documentElement; var tid; function refreshRem() { var width = docEl.getBoundingClientRect().width; if (width > 540) { // 最大宽度 width = 540; } var rem = width / 6.4; docEl.style.fontSize = rem + 'px'; } win.addEventListener('resize', function() { clearTimeout(tid); tid = setTimeout(refreshRem, 300); }, false); win.addEventListener('pageshow', function(e) { if (e.persisted) { clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); refreshRem(); })(window);

还有一种方法会根据 devicePixelRatio 设定 initial-scale 来放大 viewport，使页面按照物理像素渲染，提升清晰度。 代码见[这里][Link 1]

2 做页面时  
将设计稿的宽度缩放至 640px。在上一步中，1rem 为此时设计稿中 100px 的值。屏幕的宽度也就是 `(640 / 100) = 6.4rem`。

原文章链接： [https://www.jianshu.com/p/eb05c775d3c6][https_www.jianshu.com_p_eb05c775d3c6]

[Link 1]: https://link.jianshu.com?t=https://github.com/re54k/mobileweb-utilities/blob/master/util/mobile-util.js
[https_www.jianshu.com_p_eb05c775d3c6]: https://www.jianshu.com/p/eb05c775d3c6