HTML5實作移動端之-rem布局

移動端rem布局

1.原理

rem相對于html的font-size的大小。根據此原理在不同裝置下設定不同的font-size，顯示的效果如出一轍，進而達到自适應的效果。

2.舉例

html{
font-size：16px;
}
.area{
width:rem;
height:rem;
}
這時的.area的寬度就是160px,高度就是80px；
           

3.方法

1.根據媒體選擇器設定html元素的字型大小.

@media only screen and (min-width: px) {
        html{
            font-size: px;
        }
    }
    @media only screen and (min-width: px) {
        html{
            font-size: px;
        }
    }
假定：一個頁面的寬度是 10rem;
在第一種裝置下的寬度是200px;然而在第二種裝置下的寬度變成了300px;
使用媒體選擇器要挨個列舉出不同裝置的大小。需要列出使用者使用的各種裝置大小。
           

2.使用js設定html元素字型大小

<script type="text/javascript">
    (function (doc, win) {
        var docEl = doc.documentElement;//擷取文檔的根元素
        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        var recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth<=){
                    docEl.style.fontSize = '20px';//螢幕小于320根元素字型大小恒為20px;
                }else{
                    docEl.style.fontSize =  * (clientWidth / ) + 'px';//螢幕大于320根元素大小根據一定比例大小變化。
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
        /*DOMContentLoaded文檔加載完成不包含圖檔資源 onload包含圖檔資源*/
    })(document, window);
</script>
           

使用js設定字型大小的好處就是不用挨個列舉裝置大小。