04. 移动web-简洁高效的rem适配方案flexble.js
flexble.js
```
1.手机淘宝团队出品：简洁高效，移动端适配库
2.不需要写媒体查询了，里面js做了处理
3.原理：把当前设备划分为10等分，但是不同设备下，比例还是一致的
4.我们只要确定好当前设备的html文字大小就可以了
比如：当前是750px，只需要把html文字大小设置为75px（750px/10）就可以
5.里面页面元素rem值：页面元素的px值/75
剩余的，让flexible.js来去算
6.修改flexible的默认html字体大小：
@color:pink;
div{
color:@color;
}
@media screen and (min-750px){
html{
font-size: 75px!important;
}
}
div{
min- 320px;
max- 750px;
10rem;
margin: 0 auto;
line-height: 2.5em;
background-color: @color;
color: #000;
}
```
下载并引入flexble.js
```
//https://github.com/amfe/lib-flexible
```
一个神奇的vscode插件cssrem
```
1.自动把px转换为rem
2.插件默认的文字大小为16px，需要更改默认字体大小
3.修改插件内默认文字大小（根据设计稿改为75px)
步骤：左下角-设置-用户-功能-终端-搜索cssrem-font-size-重启编辑器
```