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

发布时间:2024年01月20日

以下方法为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: 37.5,
        propList: ['*']
      }
    }
  }

转载:Vue中使px自动转rem配置(使用第三方包)|| 用js配置+Vscode扩展处理适配问题 - 简书 (jianshu.com)

文章来源:https://blog.csdn.net/lipenghao111/article/details/135718012
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。