js，rem布局

最新推荐文章于 2024-04-29 11:17:53 发布

姽式、

最新推荐文章于 2024-04-29 11:17:53 发布

阅读量212

点赞数 1

分类专栏： js&jq 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45936690/article/details/103661024

版权

js&jq 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

//		1rem=50px 真实设备
//		1rem=100px设计图
		function rem (doc, win) {  
		  	let docEl = doc.documentElement; //html 考虑以及兼容了 屏幕旋转的事件
		  	//判断事件orientationchange 横屏 事件  或resize 
		  	let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';  	  
		  		let recalc = function () {         
		  			var clientWidth = docEl.clientWidth;   //获取屏幕大小
		  			if (!clientWidth){ return };   //未获取屏幕尺寸        
		  			//屏幕大于750
		  			if (clientWidth >= 750) {
		                 docEl.style.fontSize = '100px';
		            } else {
//			            	html的font-size         100* 设备宽度 / 750
		                 docEl.style.fontSize = 100*(clientWidth /750)+ 'px';
		            }
		      };   
		    if (!doc.addEventListener) {return ;}//addEventListener 兼容判断
			win.addEventListener(resizeEvt, recalc, false);// 屏幕大小以及旋转变化自适应
		    doc.addEventListener('DOMContentLoaded', recalc, false);// 页面初次打开自适应
		    recalc();
		}
		rem(document,window);