移动端rem布局初始化js代码,rem.js工作可用

1.在你写移动端页面的时候就应该想清楚为什么要用 rem
为啥不用px,因为px是定死的宽高,不管哪种设备宽高的显示效果都是一样的。
这样就出现问题了,如果我们在750px手机上
写一个 400px宽度div
可能刚好合适 但是 在650px宽度的手机上呢 是不是有点长了
所以在设备宽度变小的情况下 750px手机上的元素都应该按比例的缩小一点 才能达到和750px 上面一样的显示效果
这个时候就需要的一个相对的单位了 而不是一个定死的单位
这时候rem布局就 来了 他的单位就是相对于根 html元素的字体大小设置 而且这个字体大小我们可以自行更改
之前有讲过 rem的 简单入门 可以看之前的博客
https://blog.csdn.net/yunchong_zhao/article/details/104854398 // 博客地址

2.然后在了解一个东西 浏览器的窗口尺寸问题
浏览器窗口的尺寸(就是内容部分，可以看见的部分，不包括工具栏和滚动条)
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的可见高度
window.innerWidth - 浏览器窗口的可见宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
兼容所有浏览器：
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
3.代码展示
把下面的代码拷贝到一个rem.js文件中，在页面引入使用 最好放到最上面的js引入

(function PageResize(){
	(function getResize(){
		var width=window.innerWidth||window.documentElement.clientWidth||window.body.clientWidth;
		width>750?width=750:null;
		width<320?width=320:null;
		document.documentElement.style.fontSize=(width*(100/750))+'px';
		if(!window.onresize){
			window.onresize=function(){
				delayFunc(getResize);
			}
		}
	})()
// 延迟计算加个延迟是为了 当窗口发现变化 页面不是瞬间变化 有个变化的延迟 用户体验更好 
	var timer;
	var delayFunc=function(fn){
		var delay=300;// 根据实际情况可调整延迟时间
		// 这里延时执行你的函数
		timer=setTimeout(function(){
			fn();
		},delay);
	};
})();

本来想直接放代码就成了呢,想了想真正帮人，是授人以鱼不如授人以渔！