1.rem实际开发适配方案1
rem + 媒体查询 + less技术
1.1设计稿常见尺寸宽度
| 设备 | 常见宽度 |
|---|---|
| iphone4,5 | 640px |
| iphone6,7,8 | 750px |
| Andrord | 常见320px,360px,375px,384px,400px,414px,500px,720px |
一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果。
现在基本以750px为准。
1.2动态设置html标签fontsize大小
1.假设设计稿是750px
2.假设我们把整个屏幕划分为15等份（划分标准不一，可以是20份也可以是10份）
3.每一份作为html字体大小，这里就是50px
4.那么在320px设备的时候，字体大小为320/15就是21.33px
5.用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的
6.比如我们以750为标准设计稿
7.一个100×100像素的页面元素在750屏幕下，就是100/50转为rem是2rem×2rem，比例是1：1；
8.320屏幕下，html字体大小为21.33，则2rem = 42.66px，此时宽和高都是42.66，但是宽和高的比例还是1:1
9.Z这样就能实现不同屏幕下，页面元素盒子等比例缩放的效果
1.3设置公共common.less文件
1.新建common.less；设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小。
2.常见尺寸有320px,360px,375px,384px,400px,414px,424px,480px,540px,720px,750px;
3.划分的份数可定位15等份
4.为了pc端也能正常访问，默认字体大小为50px，这句样式要写在最前面
2.rem适配方案2
2.1flexible.js
手机淘宝团队出的简洁高效移动端适配库
不需要再写不同屏幕的媒体查询，js做了处理
原理：把当前设备划分为10等份，但是不同设备下，比例还是一致的。
我们需要做的就是确定好我们当前设备的html文字大小就可以了
比如当前设计稿是750px，需要把html文字大小设置为75px（750px / 10）
里面页面元素rem值：页面元素的px值 / 75
剩余的，flexible.js来计算
2.2VSCode px转换rem插件cssrem
将16改为75，重启vs code;
注意： 如果屏幕超过了750px，按照750设计稿来定.
@media screen and (min-width: 750px) {
html {
foont-size: 75px!important;
}
}
