移动端适配

水深无声 2022-03-17 06:14 367阅读 0赞

1、首先在html页面中引入meta标签

2、然后，在html页面中引入我们的rem.js适配脚本。(将下面的代码全部复制下来，在自己的项目代码里面新建一个rem.js脚本文件，将代码全部粘贴进去。然后在html页面中引入该脚本 )

;(function (designWidth, maxWidth) {
        var doc = document,
            win = window;
        var docEl = doc.documentElement;
        var tid;
        var rootItem, rootStyle;
        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;
            if (!maxWidth) {
                maxWidth = 540;
            }
            ;
            if (width > maxWidth) {
                width = maxWidth;
            }
            var rem = width * 100 / designWidth;
            rootStyle = "html{font-size:" + rem + 'px !important}';
            rootItem = document.getElementById('rootsize') || document.createElement("style");
            if (!document.getElementById('rootsize')) {
                document.getElementsByTagName("head")[0].appendChild(rootItem);
                rootItem.id = 'rootsize';
            }
            if (rootItem.styleSheet) {
                rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
            } else {
                try {
                    rootItem.innerHTML = rootStyle
                } catch (f) {
                    rootItem.innerText = rootStyle
                }
            }
            docEl.style.fontSize = rem + "px";
        };
        refreshRem();
    
        win.addEventListener("resize", function () {
            clearTimeout(tid); 
            tid = setT imeout(refreshRem, 300);
        }, false);
    
        win.addEventListener("pageshow", function (e) {
            if (e.persisted) { 
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);
    
        if (doc.readyState === "complete") {
            doc.body.style.fontSize = "16px";
        } else {
            doc.addEventListener("DOMContentLoaded", function (e) {
                doc.body.style.fontSize = "16px";
            }, false);
        }
    })(375, 750);

其中有两个参数分别是designWidth 和maxWidth，是我们设计稿的宽度和我们设定的最大宽度，可根据使用时进行修改。  
原文链接：[https://www.jianshu.com/p/98ab31ed7018][https_www.jianshu.com_p_98ab31ed7018]

[https_www.jianshu.com_p_98ab31ed7018]: https://www.jianshu.com/p/98ab31ed7018