rem适配

1. 为什么做 rem 适配
   a) 机型太多，不同的机型屏幕大小不一样
   b) 需求： 一套设计稿的内容在不同的机型上呈现的效果一致，根据屏幕大小不同的变化，页面中的内容也相应变化
2. rem和em区别
   rem: (root em),rem是css中的一种相对长度单位。
   相对于根元素(即 html元素)font-size计算值的倍数
   em是相对于父标签元素
3. 实现1：

function remRefresh() {
    
	let clientWidth = document.documentElement.clientWidth; 		// 将屏幕等分 10 份
	let rem = clientWidth / 10;
	//document.documentElement即是html
	document.documentElement.style.fontSize = rem + 'px';
	document.body.style.fontSize = '12px'; 
}
window.addEventListener('pageshow', () => {
    
	remRefresh()
})
	// 函数防抖
let timeoutId;
window.addEventListener('resize', () => {
    
	timeoutId && clearTimeout(timeoutId);
	timeoutId = setTimeout(() =>{
    
		remRefresh()
	}, 300)
})



补充也可以在html文件中配合媒体查询设计html元素
 @media screen and (min-width: 320px) {
    
            html {
    
                font-size: 21.33px;
            }
        }
        @media screen and (min-width: 750px) {
    
            html {
    
                font-size: 50px;
            }
        }

4. 实现2：
   第三方库实现lib-flexible + px2rem-loader等其他库