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-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
  <script src="./lib-flexible/flexiable.js"></script>

一个神奇的vscode插件cssrem

1.自动把px转换为rem
2.插件默认的文字大小为16px，需要更改默认字体大小
3.修改插件内默认文字大小（根据设计稿改为75px)
步骤：左下角-设置-用户-功能-终端-搜索cssrem-font-size-重启编辑器