flexible、postcss-px2rem实现屏幕适配

1、下载
cnpm install lib-flexible --save
cnpm install postcss-px2rem --save

2、把index.html的标签注释掉，flexible会自动为你生成，否则就会按照你的meta来适配
3、在main.js引入import ‘lib-flexible/flexible’;
4、vue.config.js引入postcss-px2rem，它会帮你把项目中的px转换成适配的rem；（第三方组件也适配）

module.exports = { 
	chainWebpack: (config) => {
	 css: {
    // css预设器配置项
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 108,//项目中100px的样式就会转换成1rem，浏览器中显示1rem * html（font-size的尺寸）就等于实际的px
            remPrecision:2//表示转换过程小数保留几位。
          })
       ]
      }
    },
  },
	}
}

5、如果引入px2rem-loader的话，目前只会修改scss的样式

module.exports = {
	  chainWebpack: (config) => {
	  		config.module
		    .rule('scss')
		    .oneOf('vue')
		    .use('px2rem-loader')
		      .loader('px2rem-loader')
		      .before('postcss-loader') // this makes it work. https://www.jianshu.com/p/1613b599d5be
		      .options({ 
		        remUnit: 108, //项目中100px的样式就会转换成1rem，浏览器中显示1rem * html（font-size的尺寸）就等于实际的px
		        remPrecision: 2 ,//表示转换过程小数保留几位。
		      })
		      .end()
	  }
}

注意：remUnit实际上是设计稿宽度的1/10；如下图设计稿为1920*1080，则remUnit的值应为108