基于vue-cli的移动端适配问题

最近在做移动端的项目，为了移动端的适配，上网搜了一下，发现了一套可用方案，亲测有效哦

配方 lib-flexible + postcss-pxtorem

• lib-flexible 用于设置 rem 基准值
  flexible.js手淘框架，是一个用来适配移动端的js框架。
  手淘框架的核心原理就是根据不同的width给网页中html跟节点设置不同的font-size，然后所有的距离大小都用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了。
• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
  实际开发中，我们通过设计稿得到的值单位是 px，所以要将 px 转换成 rem 再写进样式中。
  将 px 转换成 rem 我们将使用 postcss-pxtorem这个工具。

1. 在命令行中运行如下安装：

    npm i lib-flexible --save
    npm i postcss-pxtorem -save

2. 在main.js中引入lib-flexible

    import 'lib-flexible'

3. 在index.html中引入：移动适配meta标签（一般编辑器自动生成）

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

4. 更改配置
在 build/util.js 中 按如下两更改
（1）将px2rem-loader添加到cssLoaders中

const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    //一般设置75
    remUnit: 37.5 //设计稿宽度/10； 37.5按照375设计图尺寸在设计，75安装750设计图尺寸设计
  }
}

（2）在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
        })
      })
    }
 
    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

5.重启

npm run dev

• 重启项目，会发现自己设置的px被转为rem 了
• 但是有一定的局限性
• 以上实现转换适用于：
  （1）组件中编写的下的css
  （2）从index.js或者main.js中import ‘…/…/static/css/reset.css’引入css
  （3）在组件的中引入css

另外的情况不适用：

（1）组件中@import “…/…/static/css/reset.css (可考虑上面（2）、（3）的形式引入)
（2）外部样式:
（3）元素内部样式：style=”height: 417px; width: 550px;”

另外我要补充的是：在做移动端适配的时候我们不建议给字体也设置rem的单位，针对这种情况，我为字体适配的解决方案是使用媒体查询，文件以组件中@import “…/…/static/css/reset.css形式引入，可完美解决移动端适配问题