移动端微信、QQ浏览器 web 用 rem 单位适配不生效问题

最新推荐文章于 2024-05-09 11:50:05 发布

**Dragon**

最新推荐文章于 2024-05-09 11:50:05 发布

阅读量2k

点赞数

文章标签：移动端 web

本文链接：https://blog.csdn.net/Dragon1993vsLong/article/details/121455129

版权

一、首先说下我对 rem 的理解

rem 是根据 html 标签的根字体大小来计算客户端需要适配的大小

具体的代码虽然很多人都发了，但是我为了自己回顾时方便，再 copy 一下

     (function (w) {
            var resizeEvt =
                "orientationchange" in window ?
                    "orientationchange" :
                    "resize";
            var docEl = document.documentElement;

            function resizeFn() {

                var docW = docEl.clientWidth; 

                if (docW > w) {
                    docW = w;
                }
                docEl.style.fontSize = (docW * 100) / w + "px";// 750px 的设计稿除 100 得到 rem
                console.log(docEl.style.fontSize)
            }
            resizeFn();
            window.addEventListener(resizeEvt, resizeFn);
        })(750);