rem适配方案

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

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

rem实际开发适配方案

① 按照设计稿与设备宽度的比例，动态计算并设置html根标签的 font-size 大小（媒体查询）

② CSS中设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值

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

技术方案1

• less
• 媒体查询
• rem

技术方案2（推荐）

• flexible.js（淘宝）
• rem

总结：

1.两种方案现在都存在

2.方案2更简单

rem 实际开发适配方案1

rem + 媒体查询 + less技术

1. 设计稿中常见的尺寸宽度

设备	常见宽度
iphone 4.5	640px
iphone 6 7 8	750px
Android	常见320px、360px、375px、384px、400px、500px、720px大部分4.7~5寸的安卓设备为720px

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

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

① 假设设计稿是750px

② 假设我们把整个屏幕划分为15等份（划分标准不一定是15份，可以可以是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. 元素大小取值方法

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

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

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

rem 适配方案2

1. 简洁高效的rem适配方案flexible.js

手机淘宝团队出的简洁高效移动端适配库。我们再也不需要写不同屏幕的媒体查询，因为里面的js做了处理。它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备的html文字大小就可以了。比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px / 10)就是里面页面元素rem值：页面元素的px值 / 75，剩余的让flexible.js来去算。

github地址：https://github.com/amfe/lib-flexible

VSCode px 转换 rem 插件

VSCode px 转换 rem 插件 cssrem

设置html字体大小基准值

1.打开设置快捷键 ctrl+,

2.在搜索设置框中输入cssroot

3.把默认的 16 改成 75