移动端适配

lib-flexxble 适配方案现已废弃，新方案参考 https://www.jianshu.com/p/1f1b23f8348f 需要注意 Viewport Units Buggyfill 还提供了其他的功能。详细的这里不阐述了。但是 content 也会引起一定的副作用。比如 img 和伪元素::before(:before)或::after（:after）。在 img 中 content 会引起部分浏览器下，图片不会显示。这个时候需要全局添加：

img {
  content: normal !important;
}

lib-flexxble 一、项目中安装 lib-flexible

npm install lib-flexible --save

二、在项目的入口 js 文件中引入 lib-flexible

import 'lib-flexible'

三、使用 px2rem-loader 自动将 css 中的 px 转换成 rem 安装 px2rem-loader

npm install px2rem-loader --save-dev

配置 px2rem-loader 1.打开 build/utils.js 文件，找到 exports.cssLoaders 方法，在里面添加如下代码

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUint: 75
    }
}

2.修改 generateLoaders 方法中的 loaders

// 注释掉这一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

// 修改为
const loaders = [cssLoader, px2remLoader]
if (options.usePostCSS) {
  loaders.push(postcssLoader)
}

然后重新 npm run dev，打开控制台可以看到代码中的 px 已经被转成了 rem

注意： 1.此方法只能将.vue 文件 style 标签中的 px 转成 rem，不能将 script 标签和元素 style 里面定义的 px 转成 rem  2.如果在.vue 文件 style 中的某一行代码不希望被转成 rem，只要在后面写上注释 /_ no_/就可以了