vuecli3如何配置移动端px2rem

艾达的奇异世界 2019-05-14

312

今天遇到的问题是有关vuecli3的，想做移动端适配，转成rem那种

咱都知道，vuecli3之后，webpack的配置都不见了，听说放内存里了。

很好，webpack还没学明白，还搞没了，想照猫画虎都找不见了。

渣渣不懂原理，就会ctrl+c，ctrl+v

解决方案：安装px2rem-loader 插件

npm i px2rem-loader -D

git 地址：https://github.com/Jinjiang/px2rem-loader

// vue.config.js
module.exports = {
  chainWebpack(config) {
      config.module
          .rule('css')
          .test(/\.css$/)
          .oneOf('vue')
          .resourceQuery(/\?vue/)
          .use('px2rem')
          .loader('px2rem-loader')
          .options({
              remUnit: 75
      })
    }
}


// px2rem-loader 配置项
// remUnit：根元素字体大小
// remPrecision：rem小数点后精度

看到网上还有推荐postcss-plugin-px2rem，大概看了下，配置项更多一些，git地址：https://github.com/pigcan/postcss-plugin-px2rem，有兴趣的可以看下，反正我懒。

现在让我们来看看结果吧：

// css样式
.box{
  font-size: 16Px;
  background: red;
  width: 200px;
  height: 200px;
}

可以看到，css样式里写的是200px，实际运行的页面写的是rem。

⚠️不知道小伙伴们有没有注意到，font-size里的Px是大写的，嘿嘿，这个就很重要了啊，如果不想转成rem，就把px大写！

真的是烦，为啥还不够300字啊，我代码不算字么，非要让我写篇小论文？

rem

文章转载自艾达的奇异世界，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

vuecli3如何配置移动端px2rem

评论