移动端适配一直都是个大问题,现在也出现了各种各样的解决方案,比如 rem, vw 百分比等,但是比较成熟的切比较容易编写的还是 rem,他是相对于根元素的 font-size 进行等比例计算的。

但是我们在编写css的时候,需要计算每一个元素相对于根元素的rem值是多少。会比较麻烦,并且维护起来也不方便。那么社区也出现了各种解决方案。

早期的解决方案是利用 sass 或者less编写函数进行自动转换。到后来淘宝的lib-flexible,再到现在的 postcss,都是为了编写的时候写的是px,会自动转为 rem。下面我们就来看下vue-cli2.x 和 3.x 如何去配置。

vue-cli2.x

  1. 安装依赖

    npm install px2rem-loader --save-dev
    npm install lib-flexible --save

  2. 在 src/main.js 中引入

    import 'lib-flexible';

  3. 在 build/utils.js 中加入以下代码
exports.cssLoaders = function (options) {
  // ...
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
        remUnit: 75
    }
  }
  // ...
  function generateLoaders (loader, loaderOptions) {
    // 在原来的loader添加上px2remLoader
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    // ...
  }
}
  1. 如果想要页面的viewport缩放则需要将 index.html 中注释掉原来的设置

官方上说是要把这里注释掉
此处注释掉之后,lib-flexible 会根据不同的屏幕自动添加,比如2倍屏这里就是 0,5
但是,我这用的时候有点坑。。
如果将此注释掉,在某些需要写 px 的地方,就会出现在不同的屏幕上看到的 大小不一样的问题,因为缩放的比例不同了。比如富文本渲染,就得用px
解决办法是使用不注释此代码,在任何手机上都是按照1倍进行缩放。。px2remloader会自动计算,不会有问题
这里看各自项目的需要吧

vue-cli 3.x

  1. 下载依赖

    npm install postcss-pxtorem --save-dev // 此处和2.x 不一样的插件
    npm install lib-flexible --save

  2. 在 src/main.js 中引入

    import 'lib-flexible/flexible.js'; // 此处和2.x不一样

  3. 在package.json中配置

// 在最后添加此脚本

{
  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 75,
        "propList": [
          "*"
        ]
      }
    }
  }
}
  1. 如果想要页面的viewport缩放则需要将 public/index.html 中注释掉原来的设置, 通上面的第四步

标签: none

添加新评论