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
以此类推…