一直在使用px ,最近公司的项目用到了rem 这个单位,出于好奇对这个单位进行一下学习。

介绍

px 像素 相对长度单位 像素px是相对于 屏幕的分辨率

em 相对长度单位 。相对于 对象内文本的字体尺寸

如果当前行内文本的字体没有设置尺寸,则相对于浏览器的默认字体尺寸(16px)。

em的特点 em 的值并不是固定的,会继承父元素的字体大小

rem 是css3新增的一个相对单位(root em),是相对于根部元素的字体大小(html标签)

使用rem可以很好的解决h5手机页面屏幕适配的问题,能够减少开发出中因为适配问题带来的烦恼,提高我们的开发效率。

我们的适配是怎么做的

假设我们的设计图的款是 750px 设备的宽度是 450px 我们的希望 rem和设计图之前的转换为1rem=100px

我们只需要设置 html 元素的font-size=设备的宽度/(设计图的宽度/100)