动态获取移动端视宽,从而结合rem达到适配-优快云博客

本文介绍了一种使用JavaScript和jQuery实现自适应布局的方法，确保网页在不同设备上都能保持良好的显示效果。通过监听窗口大小变化，动态调整HTML根元素的字体大小，从而实现响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// jq
        !function(){
            var windowWidth= $(window).width();
            if(windowWidth > 750) {
                windowWidth = 750;
            }
            var fontSize = windowWidth / 750 * 50;//50是html根元素font-size值

            $("html").attr("style", "font-size:" + fontSize + "px");
            $(window).resize(function() {
                windowWidth = $(window).width();
                if(windowWidth > 750) {
                    windowWidth = 750;
                }
                fontSize = windowWidth / 750 * 50;
                $("html").attr("style", "font-size:" + fontSize + "px");
            });
        }();


//js
!function(){
    var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
    if(windowWidth > 750) {
        windowWidth = 750;
    }
    var fontSize = windowWidth / 750 * 50;   //50是html根元素font-size值

    document.getElementsByTagName('html')[0].style.fontSize = fontSize + "px";
    window.onresize = function(){
        var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
        if(windowWidth > 750) {
            windowWidth = 750;
        }
        fontSize = windowWidth / 750 * 50;
        document.getElementsByTagName('html')[0].style.fontSize = fontSize + "px";
    }
}();