rem adaptation

1. 为什么做 rem 适配
   a) 机型太多,不同的机型屏幕大小不一样
   b) 需求： 一套设计稿的内容在不同的机型上呈现的效果一致,根据屏幕大小不同的变化,页面中的内容也相应变化
2. rem和em区别
   rem: (root em),rem是cssA unit of relative length in .
   相对于根元素(即 html元素)font-size计算值的倍数
   emis relative to the parent tag element
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)
})



Supplements can also behtmlThe file is designed with media querieshtml元素
 @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等其他库