Web移动开发多终端自适配

最新推荐文章于 2022-09-14 21:04:55 发布

shaojingxiang

最新推荐文章于 2022-09-14 21:04:55 发布

阅读量1.5k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/shaojingxiang/article/details/98848850

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

适配的思想

为了让在不同移动终端上显示的布局字体大小比例一样,需要利用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>