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

项目背景： 公司的官网，各种分辨率适配，目前做的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！