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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

文章来源: jiangwenxin.blog.csdn.net，作者：前端江太公，版权归原作者所有，如需转载，请联系作者。

原文链接：jiangwenxin.blog.csdn.net/article/details/107143292