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-width:750px){
html{
font-size: 75px!important;
}
}
div{
min-width: 320px;
max-width: 750px;
width: 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-重启编辑器
```