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

最新推荐文章于 2024-04-29 11:17:53 发布

SeekChance

最新推荐文章于 2024-04-29 11:17:53 发布

阅读量514

点赞数

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

本文链接：https://blog.csdn.net/SeekChance/article/details/110869327

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>

SeekChance

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端如何通过Rem进行自适应布局

<!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:.
复制链接

扫一扫