在 Vue 开发中,如何利用 postcss-pxtorem 功能自动将 px 转换为 rem,实现页面布局的响应式适配?
最编程
2024-02-12 07:50:51
...
一、配置与安装步骤:
1、在 src 文件夹中创建 rem.js:
2、将以下代码复制到 rem.js 中:
// 基准大小 const baseSize = 16 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 1920 宽的缩放比例,可根据自己需要修改。 const scale = document.documentElement.clientWidth / 1920 // 设置页面根节点字体大小 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px' } // 初始化 setRem() // 改变窗口大小时重新设置 rem window.onresize = function () { setRem() }
4、在 src/main 中引入:
import './rem'
5、安装 postcss-pxtorem:
npm install postcss-pxtorem -D
6、在 Vue 项目文件夹下的 postcss.config.js 中加入:
module.exports = { plugins: { autoprefixer: {}, "postcss-pxtorem": { "rootValue": 16, "propList": ["*"] } } }
没有该文件则创建同名文件复制以上内容,至此,Vue 项目就能实现在页面中自动将 px 转换成 rem 了
7、如果要让部分属性不转换成 rem,可以将 px 写成 Px:
div{ width: 375Px; height: 812px; }
这时在页面中就会保留 375px 了: