移动端适配-px自动转rem

Posted 王李

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端适配-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

以上是关于移动端适配-px自动转rem的主要内容,如果未能解决你的问题,请参考以下文章

React脚手架如何适配移动端将px转rem

Vue移动端适配方案.md

H5在移动端尺寸适配方案

移动端适配-px转成rem

rem 移动端适配

移动端适配(手机端rem布局详解)