设计稿750px移动端字体自适应，1rem=100px

最新推荐文章于 2025-04-09 14:19:22 发布

原创最新推荐文章于 2025-04-09 14:19:22 发布 · 置顶 · 1.3w 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端代码专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页字体自适应调整的方法。通过监听浏览器的resize事件，根据浏览器窗口的宽度动态调整页面字体大小，确保了不同设备上的良好阅读体验。

<script type="text/javascript">
    //JS监听浏览器文字大小代码
    "use strict";
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = (clientWidth / 3.75) + 'px';
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>