Vue移动端适配方案flexible.js

一、下载flexible.js

cnpm i -S lib-flexible

二、main.js中引入

import 'lib-flexible/flexible.js'

三、在nodemodule/lib-flexible/flexible.js中修改代码如下：

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        // if (width / dpr > 540) {
        //     width = 540 * dpr;
        // }
        // var rem = width / 10;
 
        // 最小870px，最大适配1920px
        if (width / dpr < 870) {
            width = 870 * dpr;
        } else if (width / dpr > 1920) {
            width = 1920 * dpr;
        }
        // 设置成24等份，设计稿时1920px的，这样1rem就是80px
        var rem = width / 24;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

 四、在index.html 添加声明标签

 <!-- 让IE浏览器使用最新的 edge 内核 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- meta 的可视区声明，让页面的宽度 = 可视区（视窗-viewport）的宽度 -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">