rem适配方案

rem的概念

rem是指相对于根元素的字体大小的单位，1rem等于html根元素font-size的px值

手写rem布局

<div class='head'>头部</div>
<style>
	.head {
		width:7.5rem;
		height:0.88rem
	}
</style>
<script>
	rem()
	// 页面大小发生变化就会触发这个函数
	window.onresize = function () {
		rem()
	}
	function rem() {
		// 获取html的宽度
		let hh = document.documentElement.clientWidth
		// 获取body的宽度
		let bh = document.body.clientWidth
		// 让宽度 赋值为 html或者body的宽度 
		// IE浏览器认为body为最大的 而其他的浏览器认为html为最大的
		let h = hh || bh
		// 给html设置动态的fontSize属性
		document.documentElement.style.fontSize = (h / 750 * 100) + 'px'
	}
</script>

rem适配方案

推荐使用以下两个工具:
postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值（设置1rem等于多少px）

安装依赖

cnpm install lib-flexible postcss-pxtorem --save-dev

在main.js中导入

 import 'lib-flexible/flexible'; 

postCss配置：
创建.postcssrc.js
这是个基础的，有需要的可以自行修改

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*']
    }
  }
}

注意

这里会报错 postCss 需要8的版本（但是postCss 还没有8的版本)
所以这里建议对postcss-pxtorem进行降级

降级命令 npm install postcss-pxtorem@5.1.1 --save

标签：body,方案,适配,html,rem,flexible,postcss,pxtorem
来源： https://blog.csdn.net/m0_62351775/article/details/122252300