基于vue的px转化为rem

公司要做个16:9的自适应大屏展示页,使用lib-flexible + rem 的移动自适应方案

1. 配置flexible

   • 安装lib-flexible

   npm i lib-flexible --save
   

   • 在main.js中引入

   import 'lib-flexible' 
   

   • 在index.html中添加

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   

2. 配置px2rem-loader

   • 安装px2rem-loader

   npm i px2rem-loader --save-dev
   

   • 因为初始化项目时是通过webpack打包的,在build文件夹下面的util.js中的cssLoaders中添加

     var px2remLoader = {
     loader: 'px2rem-loader',
     options: {
       remUnit: 192
     }
   }
   

   192是单位转化率,就是1rem = 192px

   • 把px2remLoader放进generateLoader数组中

      const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
   

3. 找到node_modules文件夹下面的lib-flexible包中的flexible.js,修改 refreshRem()函数为

       var width = docEl.getBoundingClientRect().width;
       var height = docEl.getBoundingClientRect().height;
       var n = width / height
       var e = 16 / 9
       var rem = (n > e ? e / n : 1) * width / 10;
       // if (width / dpr > 540) {
       //     width = 540 * dpr;
       // }
       // var rem = width / 10;
       docEl.style.fontSize = rem + 'px';
       flexible.rem = win.rem = rem;
   

   这就是把手机自适应改为大屏自适应,为什么这么改,参照https://www.njleonzhang.com/2018/08/15/flexible-pc-full-screen.html

4. 重启项目