webpack移动端px自动转化为rem

CSS媒体查询实现响应式布局

@media screen and(max-width:980px){
    .header{
        width:900px;
    }
}

缺点：需要写多套适配样式代码

rem相对单位

原理：页面渲染时动态计算根元素的font-size值

cnpm i px2rem-loader -D //将px转化为rem
cnpm i lib-flexible -S //下载一个js库，用于动态计算根元素font-size

webpack.prod.js

{
    test:/.less$/,
    use:[
            MiniCssExtractPlugin.loader,
            'css-loader',
            'less-loader',
            'postcss-loader',
            {
              loader:'px2rem-loader',
              options:{
                        remUnit:75,//1rem = 75px
                        remPrecision:8 //小数点保留位数
                        }
              }
          ]
}