js rem适配手机

最新推荐文章于 2024-08-15 17:20:30 发布

转载最新推荐文章于 2024-08-15 17:20:30 发布 · 211 阅读

文章标签：

#js #rem

本文深入探讨了响应式布局中REM单位的应用技巧，详细解释了如何通过JavaScript动态调整根元素字体大小，实现不同屏幕尺寸下的适配效果，使页面布局更加灵活且美观。

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

<script type="text/javascript">
		    (function (doc, win) {
		        var docEl = doc.documentElement,
		        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		            recalc = function () {
		                var clientWidth = docEl.clientWidth;
		                if (!clientWidth) return;
		                if(clientWidth >= 640){
		                    docEl.style.fontSize = '100px';
		                }else{
		                	//640的设计图，用34.1333可得20px
		                    docEl.style.fontSize = 34.1333 * (clientWidth / 640) + 'px';
		                }
		            };
		        if (!doc.addEventListener) return;
		        win.addEventListener(resizeEvt, recalc, false);
		        doc.addEventListener('DOMContentLoaded', recalc, false);
		    })(document, window);
		</script>