admin管理员组

文章数量:1626379

一、首先说下我对 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);

二、在微信、QQ 浏览器中内容变大问题

我当时用的比例是 1 rem = 10 px 因为这样不至于让我写太多小数点。

我是在电脑谷歌浏览器和手机华为浏览器调试的，一切正常。

当我开始推送到微信浏览器后，我发现一切都是乱的。

我在网上找了很久也没有人给我答案，但是我发现他们用的比例都是  1rem =100 px 。

于是我重新调整了一下根字节的大小，重新计算了样式的宽高。

确实是因为我设置的根节点太小

（ 1 ：10（750px 的设计稿）在移动端差不多 html 的 font-size: 5px；）

导致有些浏览器识别不了那么小的字体就用浏览器默认最小字体代替导致的样式错乱。

三、父级元素在子元素变化后高度没有变化

解决办法：将父元素的 font-size : 0;

移动端使用rem做单位时图片会继承父级的font-size问题 - 飓风~~ - 博客园

最后希望对你有帮助。

本文标签： 浏览器单位qq端微信适配不

版权声明：本文标题：移动端微信、QQ浏览器 web 用 rem 单位适配不生效问题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1728946906a1181281.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。