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 ```

一个神奇的vscode插件cssrem

``` 1.自动把px转换为rem 2.插件默认的文字大小为16px,需要更改默认字体大小 3.修改插件内默认文字大小(根据设计稿改为75px) 步骤:左下角-设置-用户-功能-终端-搜索cssrem-font-size-重启编辑器 ```
posted @ 2020-01-22 11:32  ヾ百毒不侵  阅读(356)  评论(0编辑  收藏  举报