Vue中使px自动转化为rem配置(h5适配问题)

以下方法为px自动转换rem,顾名思义,配置完成后,不用再关心rem换算等等,只需按照设计稿的px值写入即可,当你保存后PostCSS插件会自动将px转换成所配置的rem值,并且你在浏览控制台观测界面时你会发现你在代码里写的是px单位,在控制台被转换成了rem单位。

  • postcss 一种对css编译的工具,本身不会对css一顿操作,它通过插件实现功能。
  • 1. 使用amfe-flexible + postcss-pxtorem包实现px自动转换rem
1.首先下载需要的npm包
npm i amfe-flexible
npm install postcss-pxtorem -D
  • 该插件不能转换行内样式中的 px,例如 <div style="width: 200px;"></div>

2 对文件进行额外的配置

  • 首先在mian.js引入amfe-flexible
import 'amfe-flexible'

3.在与src文件夹平级区域创建一个为.postcssrc.js的文件

对.postcssrc.js文件进行额外配置
autoprefixer 是一个自动添加浏览器前缀的 PostCss 插件,browsers 用来配置兼容的浏览器版本信息,但是写在这里的话会引起编译器警告。因为 VueCLI 内部已经配置了 autoprefixer 插件。

module.exports = {
    "plugins": {
      'postcss-pxtorem': {
        rootValue ({ file }) {
          return file.indexOf('vant') !== -1 ? 37.5 : 75
        },//因为我们一般的设计稿是750px,但是vant组件库的宽度是350px
        propList: ['*']
      }
    }
  }

上一篇:Jenkins+kubernetes流水线构建java项目


下一篇:Python Django ORM 的工作原理