2021-05-27 移动端适配的时候

最新推荐文章于 2024-11-02 12:42:04 发布

长庚启明

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量93

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42597658/article/details/117324709

版权

这段代码用于实现网页的响应式布局，根据设备屏幕宽度动态调整html元素的字体大小。当屏幕宽度大于等于750px时，字体大小设置为100px；否则，字体大小按屏幕宽度的1/3.75比例设置。代码还监听窗口的resize事件，确保布局在窗口尺寸变化时能即时更新。

摘要由CSDN通过智能技术生成

自动计算代码：注意单位使用rem

var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
        var htmlDom = document.getElementsByTagName("html")[0];

        if (htmlWidth >= 750) {
            htmlDom.style.fontSize = '100px';
        } else {
            htmlDom.style.fontSize = htmlWidth / 3.75 + "px";
        }
        window.addEventListener("resize", function () {
            var htmlDom = document.getElementsByTagName("html")[0];
            var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
            if (htmlWidth >= 750) {
                htmlDom.style.fontSize = '100px';
            } else {
                htmlDom.style.fontSize = htmlWidth / 3.75 + "px";
            }
        });