uc,qq浏览器rem自适应布局问题的解决

编程入门 行业动态 更新时间:2024-10-21 23:00:06

项目背景: 公司的官网,各种分辨率适配,目前做的pc部分

遇到的问题
今天遇到uc,qq,360急速等出现罢工问题(rem设置后尺寸偏大,导致网页放大了)谷歌,火狐,IE正常。我之前的的font-size是这样设置的:

我的设计稿是1920*1080,故设计 1rem= 12px;(鬼知道我为啥这样设计)

font-size: calc(6px + 6 * (100vw - 1000px) / 800 - 1px);

为此我还专门增加了这个函数为了那些奇怪的浏览器专门设置了动态更改根元素字体函数

export function response2Client() {
  // 移动端 rem 单位适配
  console.log("ding")
  if (isMobileOrPc()) {
    // width * 100 / 750 = width / 7.5
    // 1rem = 100px
    console.log('mobile')
    var width = window.screen.width;
    window.document.getElementsByTagName("html")[0].style.fontSize =
      width / 7.5 + "px";
  }else{//检测那些浏览器并且改字体
    if (!/Win64|Firefox|Trident/i.test(navigator.userAgent)) {
      const width =
          document.documentElement.scrollWidth |
          document.documentElement.clientWidth;
      const fontSize = (6 * (width - 1000)) / 800 + 5;
      console.log('-----'+fontSize+'--------')
      document.documentElement.style.fontSize = fontSize + "px";
    }
  }
}

把以上函数放在app.vue mounted里运行!
起初是以为那些浏览器不支持vw的原因。后面才发现不是的,是这些浏览器当根标签html字体小于12px时,按照12px绘制,即我根元素即使改成10px,元素设置10rem,被算成12*10 =120px;

你只需要把根元素设置大一点就OK了,我放大了10倍;即1rem = 120px;

@media screen and(max-width: 1920px){
  html{
    font-size: calc(51px + 6 * (100vw - 1000px) / 80);
  }
}

最后就把相应的使用rem的地方除以10,一切OK!

更多推荐

uc,qq浏览器rem自适应布局问题的解决

本文发布于:2023-06-14 02:27:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1427586.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:自适应   布局   浏览器   uc   qq

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!