H5-WebApp 自適應方案
阿新 • • 發佈:2018-12-23
對於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>