简洁高效的rem适配方案flexible.js

手机淘宝团队出的简洁高效移动端适配库我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备的html 文字大小就可以了比如当前设计稿是 750px，那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以里面页面元素rem值：页面元素的px 值 / 75 剩余的，让flexible.js来去算

github地址：https://github.com/amfe/lib-flexible

使用：

1.设置视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2.在html页面中引入flexible.js

<script src=“js/flexible.js”> </script>

3.安装VSCode px 转换rem 插件 cssrem

4、修改默认html字体大小

打开设置，搜索setting

点击在setting.json中编辑按照设计稿的大小设定，如果设计稿大小750的就设置为75。

设置成功后重启软件生效，即75px=1rem。

5.设置屏幕超过指定尺寸

假设我们需要的是750px，那么超过750px之后，字体仍设置成75px。并且我们的屏幕不会超过750px。
设置如下

body {
    min-width: 320px;
    max-width: 750px;
    width: 10rem;
    margin: 0 auto;
    }
    
@media screen and (min-width: 750px) {
    html {
        font-size: 75px!important;
    }
}