1. 程式人生 > >H5-WebApp 自適應方案

H5-WebApp 自適應方案

對於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>