uc, qq browser rem solve the problem of adaptive layout

Project Background: The company's official website, a variety of resolutions adaptation, is currently doing part pc

Problems encountered
encountered today a strike issue (after setting rem size is too large, resulting in amplification of the page) Google, Firefox, IE normally uc, qq, 360 and so rapidly. I had the font-size is set:

My design draft is 1920 * 1080, so 1rem = 12px design; (God knows why I like this design)

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

To this end I also specifically adds this function to those strange browser set up a special function to dynamically change the root element font

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";
    }
  }
}

The above functions in app.vue mounted in the running!
At first reason is that those browsers do not support the vw. I found later than is the root of the browser when the html tag is less than 12px font, according 12px drawn, i.e., even if the root element I into 10px, elements provided 10rem, is counted as 12 * 10 = 120px;

You just need to set the root element of a bigger OK, I magnified 10 times; that is 1rem = 120px;

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

Finally, put the appropriate use of local rem divided by 10, all OK!