十、rem适配方案
1.1 rem适配方案
1、让一些不能等比例自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
2、使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比例缩放的适配。
苏宁手机端用的就是rem+媒体查询
苏宁易购(Suning.com)-家电家装成套购，专注服务省心购！
1.2 rem实际开发适配方案
1、按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小；（媒体查询）
2、css中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值。
1.3 rem适配方案技术使用（市场主流）
技术方案1：
less
媒体查询
rem
技术方案2（推荐）
flexible.js
rem
技术方案1与技术方案2 原理是一样的，只是方式不同。
总结：
1、两种方案现在都存在。
2、方案2更简单，现阶段大家无需了解里面的js代码。
1.4 rem实际开发适配方案1
rem+媒体查询+less技术（用来计算除法，计算出rem，用盒子的实际像素除以html元素的字体大小）
1、设计稿常见的尺寸宽度
一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果，现在基本以750像素为准。
2 动态设置html标签font-size大小
3 元素大小取值方法
1.5 项目实战
cmmon.css
a {
text-decoration: none;
}
html {
font-size: 50px;
}
@media screen and (min-width: 320px) {
html {
font-size: 21.33333333px;
}
}
@media screen and (min-width: 360px) {
html {
font-size: 24px;
}
}
@media screen and (min-width: 375px) {
html {
font-size: 25px;
}
}
@media screen and (min-width: 384px) {
html {
font-size: 25.6px;
}
}
@media screen and (min-width: 400px) {
html {
font-size: 26.66666667px;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 27.6px;
}
}
@media screen and (min-width: 424px) {
html {
font-size: 28.26666667px;
}
}
@media screen and (min-width: 480px) {
html {
font-size: 32px;
}
}
@media screen and (min-width: 540px) {
html {
font-size: 36px;
}
}
@media screen and (min-width: 720px) {
html {
font-size: 48px;
}
}
@media screen and (min-width: 750px) {
html {
font-size: 50px;
}
}
less的使用技巧
例如在index.less中导入common.less文件
在index.less中使用@import "common"
这样index.less就会包含common.less中的内容了
1.6 高效简洁的rem适配方案flexible.js
不用实际写死html { font-size:75px } ，就用75像素计算就可以了。750px是设计稿的宽度。
flexible.js 只要屏幕宽度有一点变化，那么就会更改html的font-size的值，变化比较柔和，自己写的媒体查询没有这么柔和只有达到某个宽度才会变化font-size的值，从而达到缩放页面比例。
flexible.js下载地址：
GitHub - amfe/lib-flexible: 可伸缩布局方案
神器，vscode px转换rem插件cssrem,从此就不用less计算rem了。写完像素值会弹出提示转为rem选择然后回车就可以了。这个插件默认的html文字大小是16px;所以要修改默认插件的html文字大小，改为设计稿的大小除以10后的大小。
修改步骤：
点右边的点点点
搜索
修改
在右边修改16为75
就设置完成了，重启vscode。
案例中的重点内容
flexible.js 只要屏幕宽度有一点变化，那么就会更改html的font-size的值，变化比较柔和，自己写的媒体查询没有这么柔和只有达到某个宽度才会变化font-size的值，从而达到缩放页面比例。