脚本宝典收集整理的这篇文章主要介绍了Vue-cli webpack实现移动端rem自动化，自适应任何设备，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

1 安装vue-cli略

2 sass和postcss-px2rem

第一步 ：安装

sass 部分
cnpm install sass-loader --save-D
cnpm install node-sass --save-D
postcss-px2rem 部分
cnpm install postcss-px2rem --save-D

第二步 ： webpack.dev.conf.js和webpack.prod.conf.js下的plugins添加一个东西，大家一定要注意remUnit这个属性，就是在苹果5情况下为40px，我这里定为40，也有人定为80，我这里40是为了配合hotcss使用下面我会讲到

  plugins: [
    new webpack.LoaderOptionsPlugin({
      // webpack 2.0之后， 此配置不能直接写在自定义配置项中， 必须写在此处
      vue: {
        postcss: [require('postcss-px2rem')({ remUnit: 40, propWhiteList: [] })]
      }
    }
  ]

到这里为止安装就完成了
输入font-size:40px
输出font-size:1rem (在iphone5下)

3 我们都知道设备的像素比不一样的，所以我们用hotcss来调整设备的像素比 链接

我放在了src/assets/js/里面大家可根据习惯来
在webpack.base.conf.js下
引入方法，自己定义什么名字都行，这里我吧hotcss.js改为了viewport.js

module.exports = {
  entry: {
    app: './src/main.js',
    rem: './src/assets/js/viewport.js'
  }
}

这样就大功告成啦

脚本宝典总结

以上是脚本宝典为你收集整理的Vue-cli webpack实现移动端rem自动化，自适应任何设备全部内容，希望文章能够帮你解决Vue-cli webpack实现移动端rem自动化，自适应任何设备所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。