pc端 移动端 适配 rem

1. 安装与使用lib-flexible

npm install lib-flexible --save-dev

2 引入 lib-flexible

在  main.js 中引入lib-flexible

import 'lib-flexible'

3.修改源码（根据设计稿）

node_modules下lib-flexible下flexible.js

原本的

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width =  540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

修改成

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width =  width * dpr;
        }
         // 当设计稿大于540的时候宽度是当前的设计稿宽度

        var rem = width / 10;  
         // 分为多少份，这里份为10份 假如设计稿宽度是375px 这时1rem ==  37.5px
          // 如果宽度是1920 那么1rem == 192px
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

4.修改编辑器px 转 rem （HBuilder X）

1:打开HBulderX->工具->设置

 2:点击编辑器配置

 3:右侧配置区域,向下拉菜单->px转换为rem比例,填写您设置好的比例值(例如,您的设计稿宽度是375px，您在flexible.js分为10份那么就是375/10 = 37.5px)

5.代码抒写