js，rem布局

原创于 2019-12-23 10:19:10 发布

· 245 阅读

0 ·

版权

文章标签：

#javascript

js&jq 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种基于REM单位的自适应布局方案，通过JavaScript动态调整html元素的字体大小，实现不同屏幕尺寸下的响应式设计。适用于前端开发中解决设备宽度不一带来的布局问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//		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);