rem介绍

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

rem来做适配

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

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

具体做法

1 根据不同的设备宽度在根元素上设置不同的字体大小。
我一般会设置1rem为1/10屏幕宽度。代码如下

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

2 做页面时
我一般会将设计稿缩小至宽度为320px(切图标时,还是按照原图来切)。在上一步中,1rem为1/10屏幕宽度。因此,px与rem的转化为 1px = 1 / 320 * 10rem。如果使用Sass可以用如下的转化代码

然后,在其他文件中,类似如下进行调用

生成的CSS

发表评论

电子邮件地址不会被公开。 必填项已用*标注