前端如何通过Rem进行自适应布局

最新推荐文章于 2025-06-27 19:45:56 发布

SeekChance

最新推荐文章于 2025-06-27 19:45:56 发布

阅读量589

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html html5 css css3

本文链接：https://blog.youkuaiyun.com/SeekChance/article/details/110869327

html 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何通过JavaScript实现在不同设备上保持设计稿比例，利用rem单位实现元素宽度随屏幕尺寸变化的技术。重点讲解了如何计算根元素字体大小，确保元素宽度与设计稿一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .d1 {
      background-color: red;
      width: 1rem;
      height: 1rem;
    }
  </style>
</head>
<body>
  <div class="d1"></div>
  <div class="d2"></div>
  <script>
    // 假设设计稿上是640px宽度,.d1宽度是100px,我们希望能跟设计稿上保持相同的比例
    // 那么, 100/640 = 当前元素宽度/当前设备宽度
    // 推出  当前元素宽度 = 100*当前设备宽度/640
    // 但是，我们不可能实时的改变页面上所有元素的宽度,所以需要借助rem来实现,rem可以让元素根据根元素的字体大小进行变化,1rem = 根元素字体大小
    // 所以，上面的公式中的当前元素宽度，我们希望能够转换为: 根元素字体大小*当前元素宽度与根元素字体大小的比值,也即 x * rem的形式,同时，我们要知道 右边的100表示的元素在设计稿中的宽度, 它应该也可以表示成 x * rem的形式，区别在于rem大小不同
    // 所以，上面公式进一步转化为  x* rem1 = x * rem2 * 当前设备宽度/640,结果就变成我们需要确定设计稿中字体大小是多少,以此来推出我们实际页面中字体大小是多少
    // 为了方便计算，我们假定设计稿的根字体大小为100px(为什么说方便计算呢?因为如果假定为100px的话，那么比如我们看到设计稿中的一个元素宽度是64px的话，我们就能轻松的知道它的rem形式是0.64rem)
    window.onload = function(){
      document.documentElement.style.fontSize = (document.documentElement.clientWidth * 100)/640 + 'px';
      window.onresize = function(){
        document.documentElement.style.fontSize = (document.documentElement.clientWidth * 100)/640 + 'px';
        document.querySelector('.d2').innerHTML = getComputedStyle(document.querySelector('.d1')).width;
      }
    }
  </script>
</body>
</html>