Web移動開發多終端自適配

適配的思想

爲了讓在不同移動終端上顯示的佈局字體大小比例一樣,需要利用js動態設置fontSize和利用rem來進行編寫css

javascript實現

以屏幕分辨率爲750px設置fontSize爲100px作爲基礎,根據移動終端的寬度縮放大小

<script>
    (function (document, window) {
        var documentElement = document.documentElement,
            resizeEvent = "orientationchange" in window ? "orientationchange" : "resize",
            resizeHandle = function () {
                var clientWidth = documentElement.clientWidth;
                if (!clientWidth)  return;
                documentElement.style.fontSize = parseInt(100 * ((clientWidth > 750 ? 750 : clientWidth) / 750)) + "px";
            };
        if (!document.addEventListener)  return;
        window.addEventListener(resizeEvent, resizeHandle, false);
        document.addEventListener('DOMContentLoaded', resizeHandle, false);
    })(document, window);
</script>

css方面

1rem <==> font-size設置的大小
根據屏幕分辨率爲750px的時候的fontSize爲100px,此時用1rem表示

例如: UI設計圖此時某個塊的邊距爲20px,則此時在css設置爲0.2rem
以此類推…