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>