乐趣区

关于javascript:移动端适配px自动转rem

步骤:
1. 装包: npm install postcss-pxtorem --save-dev
2. 我的项目根目录新建 vue.config.js

const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')

module.exports = {
  // 款式相干
  css: {
    // 加载选项
    loaderOptions: {
      postcss: {
        plugins: [
          // 设置我的项目款式兼容
          autoprefixer(),
          // px 转 rem 的规定
          pxtorem({
            // 1rem 设计图中是 1rem 是 37.5px
            // 设计图宽度为 37.5*10 = 375
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      }
    }
  }
}
  • vant-rem 适配示例代码:https://github.com/youzan/vant-demo/tree/master/vant/rem
退出移动版