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

一、首先说下我对 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 单位适配不生效问题相关推荐

微信内置浏览器及华为小米QQ浏览器关于使用rem的兼容性问题解决
一.问题描述在做移动端h5页面开发的时候,rem的使用简直是屏幕适配的利器,但是,它在也存在兼容性问题: 在微信内置浏览器及华为小米内置及QQ浏览器访问rem做的h5的时候,由于设置部分字体过小,以 ...
html5 uc qq,移动端UC /QQ 浏览器的部分私有Meta 属性
如同桌面端一样,在国内做web 移动开发的话肯定得考虑下移动端占有率靠前的几个国产浏览器的一些适配工作.好在当前移动端浏览器都是wekit 内核一霸天下,单从这个角度看兼容工作相对于桌面的百花齐放舒服 ...
js rem 单位适配（手机、平板、PC）？
js rem单位适配 <script type="text/javascript">// 设备区分 (安卓.火狐.平板.PC)var os = function() { ...
移动端UC /QQ 浏览器的部分私有Meta 属性
<meta name="format-detection" content ="telephone=no"/> 格式检测禁止识别我们页面中的数 ...
移动web开发rem+js适配布局开发
浏览器现状 pc端浏览器 360浏览器,谷歌浏览器,qq浏览器百度浏览器,搜狗浏览器.IE浏览器移动端常见浏览器 uc浏览器 qq浏览器欧朋浏览器百度手机浏览器,360安全浏览器... 国内 ...
PC端微信QQ第三方登录
微信第三方登录实现原理准备工作参考微信开放平台:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wec ...
电脑端微信设置浏览器+设置截屏快捷键
文章目录设置打开网页浏览器的步骤: (1)设置 (2)通用设置 (3)勾选使用系统默认浏览器打开网页(系统默认浏览器win10可在搜索栏中搜索默认设置,进行设置) 设置快捷键 (1)默认的快捷键是 ...
cli3 px转rem适配移动端_Vue:将px转化为rem，适配移动端
1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...
布局Mac，QQ浏览器全面出击
在客户端软件领域有着举足轻重地位的腾讯公司新品不断,在Mac领域,面向普通Mac用户推出的QQ浏览器 for Mac 1.0 版日前已经正式发布.作为专为果粉用户打造的新浏览器产品,QQ浏览器 for ...

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

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

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

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

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

最新文章

热门文章