flexible.js与rem自适应配置网页

所使用的技术：

1.flexible.js

2.rem

3.vscode插件：cssrem

原理

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

页面元素大小取值方法

①最后的公式:页面元素的rem值=页面元素值(px) / (屏幕宽度/划分的份数))
②屏幕宽度/划分的份数就是html的 font-size的大小
③或者:页面元素的rem值=页面元素值(px) / html font-size字体大小

技术选型案例

• 方案:我们采取单独制作移动页面方案·
• 技术:布局采取rem适配布局 ( flexible.js + rem )
• 设计图:本设计图采用750px设计尺寸

 1.下载flexible.js

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

设置成10等分

// set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

2.设置meta标签

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

3.引入flexible.js

<script src='js/flexible.js'></script>

4.初始化style

<style>
      /* 如果屏幕超过了750px，那么我们就就按照750px设计稿来走，不会让页面超过750px ,使用媒体查询来设置*/
      @media screen and (min-width: 750px) {
        html {
          font-size: 75px !important;
        }
      }
      body {
        min-width: 320px;
        max-width: 750px;
       /* flexible.js把设计稿750px进行10等分，所以html文字大小设置为75px(750px/ 10)，页面元素rem值:页面元素的px值/ 75(750px/75)*/
        width: 10rem;
        margin: 0 auto;
      }
    </style>

这样就完成了，然后就可以根据750的设计稿进行在移动端开发了
同样要是640的设计稿，则要设置html根字体cssroot为64

5.辅助工具

在插件里修改root font size大小为75

网上找到的一篇相关的文章：

https://www.cnblogs.com/Qooo/p/13816798.html