1. 什么是rem
- rem是CSS3新增的相对单位,root em,也就是根em
- 使用rem为元素设定大小时,相对的是HTML根元素。
- 优点1:可以只修改根元素的字体,来成比例的改掉所有元素的字体
- 优点2:可以避免字体逐层复合的反应
2. 使用rem
当HTML根的字体大小 font-size=16px时
,我们如果想要一个12px大小的字体,就可以设置成12/16 = 0.75px
的大小。
为了方便计算,我们可以设置HTML的字体为font-size=10px
,这样12px的字体就可以写成1.2rem了。
或者设置font-size=62.5%
,也可以写成1.2rem了
这里的62.5%是怎么计算出来的?
10/0.625 = 16
网页默认的字体大小是16px
如果根节点没有设置font-size,那么1rem = 16px
3. 实例展示
3.1. 看小说时,小中大三种展示方式
3.2. 移动端开发技巧
使用rem进行自适应布局的关键就是给HTML赋值一个动态的font-size。
不同的手机分辨率不同,需求是寻找最佳视觉效果
一般移动端的设计稿会采用iPhone6宽度像素尺寸作为标准(750px)。
️以750设计稿为例
首先将html的font-size设置为100vw/7.5,这时候1rem=100px了
之后将所有的px换成rem。
低版本不支持rem,则用js来做
document.documentElement.style.fontSize = window.innerWidth/7.5 + "px"
网友评论