UC、QQのブラウザレムは、適応レイアウトの問題を解決します

プロジェクトの背景：同社の公式サイト、解像度適応の様々な、現在、一部のPCをやっています

問題が発生した
ストライキの問題（レムサイズを設定した後、ページの増幅が得られ、大きすぎる）ので、急速にグーグルは、Firefox、IE、通常UC、QQ、360、今日遭遇しました。私は、フォントサイズが設定されていました。

私のデザイン案は1rem = 12ピクセルデザインなので、1920 * 1080であり、（私はこのデザインが好きな理由神は知っています）

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で上記の機能は、実行中に取り付けられました！
第一の理由で、これらのブラウザはVWをサポートしていないということです。私は後で見出さ以上で、12ピクセル描画による、HTMLタグ未満12ピクセルフォントであるブラウザのルート、すなわち、ルート要素I 10pxの中に、要素設け10remは、12 * 10 = 120ピクセルとしてカウントされている場合でも、

あなただけの大きなOKのルート要素を設定する必要があり、私が10倍に拡大し、それが1rem = 120ピクセルです。

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

最後に、10で割ったローカルREMの適切な使用を入れて、すべてOK！