动态获取移动端视宽,从而结合rem达到适配

Posted 2021-01-04 520bigbear

// 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";
    }
}();