rem 布局原理

rem：相对于根元素(即 html 元素)font-size 计算值的倍数。 通俗的说，1rem = html 的 font-size 值 这段代码。a 标签的 font-size 值为 0.5rem，实际就是 100px*0.5=50px。 html{font-size:100px;} a{font-size:.5rem;}

如何使用 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>