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

1. 首先安装包

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

• 1
• 2

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
            }
          }
        ]
      },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54

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

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

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

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

• 1

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

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

//我们把代码改一下
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;
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

5. 最后我们再来运行一下
   

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

• 1
• 2
• 3
• 4

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

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

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

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