移动端通过设置rem使页面内容及字体大小自动调整

移动端通过设置rem实现页面内容及字体大小自动调整

function setRem(){
    
	var rem = document.documentElement.clientWidth / 10;  // 把设备屏幕宽度十等分
	document.documentElement.style.fontSize = rem + "px";  // 把文档根字体设置成设备宽度的1/10
}
setRem();
window.addEventListener("resize", setRem);  // 添加resize事件，当窗口调整时同步调整文档根字体大小
window.addEventListener("pageShow", function(e) {
      // 添加pageShow事件，在页面显示时触发
	if(e.persisted) {
      // 判断是否是缓存中取的页面，true即是缓存中取的页面，触发设置根字体的函数
		setRem();
	}
})

pageShow事件和load事件一样，均是加载页面时即执行函数，通过点击a标签，F5刷新以及点击前进后退按钮均可刷新页面并执行load事件。但火狐有个往返缓存，保留页面数据以及DOM和JS状态，也就是说整个页面均被缓存，所以点击后退也不能刷新页面，所以可以通过pageShow触发，通过判断是否是缓存中取的页面来进行触发