详解vue2.0 不同屏幕适配及px与rem转换问题

1.设置meta标签

2.安装postcss-px2rem 和px2rem-loader

npm i postcss-px2rem --save
npm install px2rem-loader --save

3.配置px2rem-loader
这里是重要的一步~~
在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：

const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

同时，在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {
　　const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

if (loader) {
　　loaders.push({
　　loader: loader + '-loader',
　　options: Object.assign({}, loaderOptions, {
　　sourceMap: options.sourceMap
　　})
　　})
　　}


if (options.extract) {
　　return ExtractTextPlugin.extract({
　　use: loaders,
　　fallback: 'vue-style-loader'
　　})
　　} else {
　　return ['vue-style-loader'].concat(loaders)
　　}
}