1. rem基础

1.1. rem单位

rem (root em)是一个相对单位，类似于em，em的大小是取决于当前元素的字
体大小或者父元素的字体大小。

不同的是rem的基准是相对于html元素的字体大小。

如果整个页面很多地方用rem进行布局，只需要在不同屏幕下修改html的字体大小，那么整个页面都会同步变化

比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

/* 根html 为 12px */
html {
   font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */       
div {
    font-size: 2rem;
}
复制代码

rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

2. 媒体查询+rem实现元素动态大小变化

• rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
• 媒体查询可以根据不同设备宽度来修改样式
• 媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化

3. rem适配方案

1.让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。

2.使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。

3.1. rem 实际开发适配方案

• ①按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询）
• ②CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；

3.2. rem 适配方案技术使用（市场主流）

技术方案：

1.less+rem+媒体查询

2.flexible.js+rem

总结：

两种方案现在都存在。

方案2 更简单，现阶段大家无需了解里面的js代码。

3.2.1. rem实际开发适配方案1

3.2.1.1. 设计稿常见尺寸宽度

一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果现在基本以750为准。

3.2.1.2. 动态设置 html 标签 font-size 大小

①假设设计稿是750px

②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）

③每一份作为html字体大小，这里就是50px

④那么在320px设备的时候，字体大小为320/15就是 21.33px

⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的

⑥比如我们以750为标准设计稿

⑦一个100*100像素的页面元素在 750屏幕下， 就是 100/ 50 转换为rem 是 2rem*2rem 比例是1比1

⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1

⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果

3.2.1.3. 元素大小取值方法

①最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）

②屏幕宽度/划分的份数就是 htmlfont-size 的大小

③或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

3.2.2. rem 适配方案2

手机淘宝团队出的简洁高效 移动端适配库

我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理

它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。

我们要做的，就是确定好我们当前设备的html 文字大小就可以了

比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以

里面页面元素rem值： 页面元素的px 值 / 75

剩余的，让flexible.js来去算

github地址：github.com/amfe/lib-fl…

总结：

因为flexible是默认将屏幕分为10等分

但是当屏幕大于750的时候希望不要再去重置html字体了

所以要自己通过媒体查询设置一下

并且要把权重提到最高

3.2.2.1. VSCode px 转换rem 插件 cssrem

因为cssrem中css自动转化为rem是参照默认插件的16转换的所以需要自己配置