CSS rem布局

• 1. 什么是rem
• 2. 使用rem
• 3. 实例展示
  • 3.1. 看小说时，小中大三种展示方式
  • 3.2. 移动端开发技巧

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"