rem 布局原理

如何使用 rem 進行布局？

1.标簽的 rem 機關的值怎麼計算

通過使用 rem + js 改變 html 标簽的 font-size（整體縮放）實作相容性更高的頁面下面來舉個例子，

當我們拿到的設計圖是 750px 的時候，視窗寬度 750px，html 的 font-size 的大小為

100px；

也就是說 1rem = 100px；是以标題的 font-size 的大小為 26/100=0.26rem；

2.如何實作相容各種螢幕大小的裝置

使用到 javascript 來動态改變 html 标簽 font-size 的大小，其他的 rem 機關的數值就會被浏覽動态計算轉為 px 機關，進而達到和設計圖高度的相似。

當螢幕 750px 的時候，html 的 font-size 值是 100px；視窗大小變化的時候，可以通過js 擷取到視窗大小。

這時候擷取到一個比例 750：100=擷取到的螢幕大小：html 标簽的 px 機關的值以下 js 代碼，用于實作根據擷取到的螢幕大小，動态修改 html 标簽的 px 機關的值

<script>
  function rem() {
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + "px";
    console.log(document.documentElement.clientWidth)
  }
  rem();
  window.onresize = rem;
</script>