利用px2rem-loader和lib-flexible如何实现PC端大屏项目的全自动开发

大屏项目在做的时候,每次都要自己去计算rem的值很麻烦,也影响开发进度,所以无意中发现了一个好东西,利用webpack配置px2rem-loader和lib-flexible来实现px转化rem;

1. 首先安装包

   npm install px2rem-loader -D
   npm install lib-flexible -S
   

    

2. 安装好了我们就开始配置,参照官网的配置方法

   module.exports = {
     module: {
       rules: [{
         test: /\.css$/,
         use: [{
           loader: 'style-loader'
         }, {
           loader: 'css-loader'
         }, {
           loader: 'px2rem-loader',
           // options here
           options: {
             remUnit: 75,//设计图的宽度/10 比如你的设计图是1920的宽度 这里你就1920/10=192
             remPrecision: 8//换算的rem保留几位小数点
           }
         }]
       }]
     }
   }
   //也可以参照我的配置
   {
           test: /\.less$/, //我们可以使用css预编译工具   这里我用sass举例
           use: [ //安装 npm install sass-loader node-sass css-loader vue-style-loader postcss-loader style-loader -D  反正后面也要安装 索性一股脑全安装了
             process.env.NODE_ENV ? //MiniCssExtractPlugin.loader 用来抽离css文件的 不用打包到js文件里
             'vue-style-loader' : MiniCssExtractPlugin.loader, //可以再vue模板中的<style lang='scss'>使用sass
             'css-loader',
             'postcss-loader', //css自动加上兼容性前缀
             'less-loader',
             {
               loader: 'px2rem-loader',
               options: {
                 remUnit: 192,
                 remPrecision: 5
               }
             }
           ]
         },
         {
           test: /\.css$/, //同上
           use: [
             'style-loader',
             process.env.NODE_ENV ?
             'vue-style-loader' : MiniCssExtractPlugin.loader, //MiniCssExtractPlugin.loader 用来抽离css文件的 不用打包到js文件里
             'css-loader',
             'postcss-loader',
             {
               loader: 'px2rem-loader',
               options: {
                 remUnit: 192,
                 remPrecision: 5
               }
             }
           ]
         },
   

   3.然后我们启动一下项目看一下有没有换算成功

3. //这是我写的CSS样式转化成上图那样,但是怎么看着这么奇怪,好像有很大问题
   .title{
           width:400px;
           height:100px;
           font-size: 32px;
       }
       .text{
           width:200px;
           height:200px;
           border-radius: 50%;
       }
   

    

4. 所以这时候需要另外一个插件来帮我们动态计算html的font-size

5. import 'lib-flexible/flexible';//在入口文件引入然后运行
   

   然后我们发现还是有问题,为什么比例还是不对,一定使我们打开的方式不对

6. 

7. 我们来分析一波;为什么我1600的宽度却计算的是54px呢,显然是不科学的;所以我们第一时间应该联想到是插件哪里出了小问题;我们打开引入的这个文件,看一下封装的代码哪里限制了我们PC端使用rem;

8. //我们把代码改一下
   function refreshRem(){
           var width = docEl.getBoundingClientRect().width;
           if (width / dpr > 540) {
               width = width * dpr;//当屏幕宽度超过540的时候我们应该以实际宽度重新计算,从而来做到适应PC
           }
           var rem = width / 10;
           docEl.style.fontSize = rem + 'px';
           flexible.rem = win.rem = rem;
       }
   

   最后我们再来运行一下

9. //这时候发现就很nice,因为我的设计图是1920的宽度,我的浏览器宽度是1600;我写的样式是
   400px;400/1920*10=2.08333保留了五位小数;所以在1600屏幕下换算的宽度应该是反着推导;
   X/1600*10=2.08333;我们求出来X的值是:333.3328px;
   然后我们看一下实际在浏览器中的表现
   

   

10. 这时候发现我们的宽度是333.33,和我们预计的值一样,这样就ok了,你就只管写你的PX其他换算什么的交给工具去做吧;你以为这样就结束了,并没有
    6. 问题是1px的边框也会帮你转成rem的是不是很绝望,完全没必要啊

11. 

12. 完全不出意外啊;可是我不想转换啊,怎么办呢?莫慌我们是有办法的;

    //对于有些地方不用转换的我们可以在样式后面添加/*no*/这样就不会给我们转化了;
    .text{
            width:200px;
            height:200px;
            border-radius: 50%;
            border:1px solid red;/*no*/
        }
        //看一下效果
    

    

13. end到这里我们就已经完成了所以配置;强调一下我的webpack的配置都是最新版的,都是自己配的,没有用脚手架,请慎重选择