rem适配

最新推荐文章于 2026-04-14 14:57:24 发布

原创最新推荐文章于 2026-04-14 14:57:24 发布 · 888 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#JS #移动端

收录于

日常积累专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种基于rem的响应式布局适配方案，适用于750宽度的UI设计稿，通过简单的JS代码实现不同屏幕尺寸下的字体大小自适应调整，确保网页在各种设备上都能保持良好的视觉效果。

rem适配

将代码放在页面的head里面，该适配专门针对750宽度的UI设计稿，如果是640的设计稿只需要将750改成640即可，实际页面中的单位就是除以100即可。

(function(doc, win) {
				var docEl = doc.documentElement,
					resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
					recalc = function() {
						var clientWidth = docEl.clientWidth;
						if(!clientWidth) return;
						docEl.style.fontSize = 100 * (clientWidth / 750 ) + 'px';
					};
				if(!doc.addEventListener) return;
				win.addEventListener(resizeEvt, recalc, false);
				doc.addEventListener('DOMContentLoaded', recalc, false);
			})(document, window);