如何使用pxtorem

移动端

发布时间 : 2021-03-13 20:36

阅读 :

安装postcss-pxtorem包

1	npm i postcss-pxtorem -D

配置规则

module.exports = {
	plugins: {
		'autoprefixer': {
			browsers: ['Android >= 4.0', 'iOS >= 7']
		},
		'postcss-pxtorem': {
			rootValue: 37.5px,
			propList: ['*']
		}
	}
}

设置根元素font-size动态变化（iphone 6下开发）

function setRem () {
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    let htmlDom = document.getElementsByTagName('html')[0];
    htmlDom.style.fontSize= htmlWidth/10 + 'px';
}
setRem();
// 这里可以加一个节流
window.onresize = function () {
    setRem()
}

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com