H5-WebApp 自适应方案 - rem

最新推荐文章于 2024-08-10 23:05:55 发布

原创最新推荐文章于 2024-08-10 23:05:55 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#布局 #web app

HTML5 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了WepApp中采用rem布局方案实现不同机型自适应的方法。通过动态调整根元素字体大小，使得页面布局能够在不同屏幕尺寸下保持一致。文中还提到了字号使用px单位并结合data-dpr属性进行适配的技巧。

对于WepApp来说，为了更通用地满足各种机型的自适应布局要求，我们可以采用rem布局方案。

rem是相对于根元素（html）字体大小的单位，他只是一种相对单位。不同于另一个相对单位em，em是相对于父元素的字体大小，而rem则相对于根元素（html），与父元素的字体大小无关。

字号大小不推荐用rem作为单位，否则可能会有文字排版问题。因此，字号仍旧使用px作为单位，并配合data-dpr自定义属性来在普通屏和高清屏设置不同的font-size。

适配代码如下：

<script type="text/javascript">
	window.onresize = function(){
		RootSize();
	}
	function RootSize(){
		var docWidth=document.documentElement.clientWidth;
		var objHtml = document.getElementsByTagName('html')[0];
		objHtml.style.fontSize=docWidth/7.5+'px';
	}	
	RootSize();
</script>