一、首先说下我对 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 得到 remconsole.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浏览器 web 用 rem 单位适配不生效问题》对你有帮助，请点赞、收藏，并留下你的观点哦！
