H5-WebApp 自适应方案 - rem

最新推荐文章于 2024-06-24 15:43:32 发布

Zhany9

最新推荐文章于 2024-06-24 15:43:32 发布

阅读量3.3k

点赞数

分类专栏： HTML5 文章标签：布局 web app

本文链接：https://blog.csdn.net/admin_yi/article/details/53669103

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

对于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>