移动端rem

最新推荐文章于 2025-12-22 19:57:02 发布

原创最新推荐文章于 2025-12-22 19:57:02 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文详细介绍了如何使用postcss-pxtorem插件将px单位转换为rem单位，实现响应式布局。包括创建rem.js文件设置根字体大小，修改.postcssrc.js文件配置插件参数，以及在项目中直接使用设计稿尺寸。

cnpm install postcss-pxtorem -D安装postcss-pxtorem

//1.创建 rem.js 文件夹 在 min.js 中引用
const baseSize = 32
function setRem() {
  	const scale = document.documentElement.clientWidth / 750;
  	document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
setRem();
window.onresize = function () {
	setRem();
}

//2.在项目的根目录下找到.postcssrc.js文件在文件内添加以下代码，一般750px的设计稿的根元素大小设置32.
'postcss-pxtorem': {
	rootValue: 32,
	propList: ['*'],
	selectorBlackList: ['mint-']
}

//3.使用时直接使用设计稿上的尺寸单位使用 px