JS控制网页文字大小，使其能够自适应屏幕大小

最新推荐文章于 2024-07-19 09:33:15 发布

空白_回忆

最新推荐文章于 2024-07-19 09:33:15 发布

阅读量8.5k

点赞数 4

分类专栏： JavaScript 文章标签： javascript 函数浏览器文字大小 html

本文链接：https://blog.csdn.net/qq_26291823/article/details/50984010

版权

JavaScript 专栏收录该内容

79 篇文章 0 订阅

订阅专栏

JS控制网页文字大小，使其能够自适应屏幕大小

ps：本人亲测，阿里云2核4G5M的服务器性价比很高，新用户一块多一天，老用户三块多一天，最高可以买三年，感兴趣的可以戳一下：阿里云折扣服务器

<script type="text/javascript">
            //JS监听浏览器文字大小代码
            (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 = 20 * (clientWidth / 320) + 'px';
                    };

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


根节点的字体大小会根据浏览器变化，所以这样就可以用rem来自适应屏幕大小