vant,vue移动端适配px转rem,postcss-pxtorem的配置使用

移动端适配执行方法:

  1. npm下载 : npm install postcss-pxtorem --save-dev npm install amfe-flexible --save-dev
  2. 在项目根目录下新建文件 postcss.config.js
  3. postcss.config.js 的内容为:
module.exports = {
  plugins: {
    autoprefixer: {
      browsers: [Android >= 4.0, iOS >= 7]
    },
    postcss-pxtorem: {
      rootValue: 37.5,
      //这是基准值,在375px的屏幕变大rem的值会变大,小于这个大小元素的rem值会变小
      propList: [*]
    }
  }
  }
  1. 在main.js中引入 import amfe-flexible
  2. 重新启动服务器。配置完成后在开发中就可以使用px单位了,它会自动转化为rem。
  3. 需要查看是否完成配置的话可以在浏览器调试中直接审查元素的大小。 如图所示:查看元素的样式,显示的单位为rem就表示完成适配了
需要注意的是,适配方法可以把代码中的样式px转为rem,但是行内样式不能转换, 举例:<div class="home" style="font-size:100px;"></div>,这个行内样式的px不能转为rem。除了这个,其他都可以转换rem。

演示完成,谢谢观看!

经验分享 程序员 微信小程序 职场和发展