返回文章

rem 布局原理

em 是什么 em 是相对单位， 在 font-size 中使用 em， 代表相对父元素字体大小， 在其他属性中使用 em， 意味着相对当前选择器字体大小 em 的题 问：s1 s1 s5 s6 的 font-size 各是多少？答案在底部 rem 是什么 rem 作为非根元素时， 相对于根元素大小 rem 的本质是基于宽度的等比缩放， 一般使用 js 来设置 弹性布局与响应式布局 弹性布局是响应…

em 是什么

em 是相对单位， 在 font-size 中使用 em， 代表相对父元素字体大小， 在其他属性中使用 em， 意味着相对当前选择器字体大小

em 的题

<div class="p1">
  <div class="s1">1</div>
  <div class="s2">1</div>
</div>
<div class="p2">
  <div class="s5">1</div>
  <div class="s6">1</div>
</div>

.p1 {
  font-size: 16px;
  line-height: 32px;
}
.s1 {
  font-size: 2em;
}
.s2 {
  font-size: 2em;
  line-height: 2em;
}
.p2 {
  font-size: 16px;
  line-height: 2;
}
.s5 {
  font-size: 2em;
}
.s6 {
  font-size: 2em;
  line-height: 2em;
}

问：s1 s1 s5 s6 的 font-size 各是多少？答案在底部

rem 是什么

rem 作为非根元素时， 相对于根元素大小

html {
  font-size: 16px;
}
/* p的font-size为48px */
p {
  font-size: 3rem;
}

rem 的本质是基于宽度的等比缩放， 一般使用 js 来设置

弹性布局与响应式布局

  1. 弹性布局是响应式布局的子集
  2. 弹性布局是等比例缩放
  3. 响应式布局是根据不同 media 有不同的响应
  4. rem 是弹性布局的实现方式之一

rem+js 布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>rem+js布局</title>
    <style>
      body {
        font-size: 16px;
        margin: auto;
        padding: 0;
        width: 10rem;
        border: 1px solid palevioletred;
        box-sizing: border-box;
      }
      .p1 {
        width: 50%;
        height: 5rem;
        box-sizing: border-box;
        border: 1px solid yellowgreen;
      }
      .s1 {
        /* 28px/72 */
        font-size: 0.38888888rem;
        color: #666;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="p1">
      宽度为屏幕宽度的50%
      <div class="s1">
        这是字体
      </div>
    </div>
  </body>
  <script>
    var documentElement = document.documentElement;
    function callback() {
      var clientWidth = documentElement.clientWidth;
      // 屏幕宽度大于720，不在放大
      clientWidth = clientWidth < 720 ? clientWidth : 720;
      documentElement.style.fontSize = clientWidth / 10 + "px";
    }
    document.addEventListener("DOMContentLoaded", callback);
    window.addEventListener("orientationchange" in window ? "orientationchange" : "resize", callback);
  </script>
</html>

rem 布局的缺陷

  1. rem 部署适用于偏 app 类的页面， 图片多的页面， 活动多的页面
  2. rem 在字体上的使用是有偏差的， 因为字体的宽高不是线性关系的
  3. 在一些新闻类的页面， 常有大 中 小字体， 这个 rem 布局方式是不适用的， 一般使用 em 单位， 来实现字体的响应式
@media screen and (min-width: 320px) {
  body {
    font-size: 18px;
  }
}
@media screen and (min-width: 481px) and (max-width: 640px) {
  body {
    font-size: 34px;
  }
}
@media screen and (min-width: 641px) {
  body {
    font-size: 42px;
  }
}

p {
  font-size: 2.4em;
}
p a {
  font-size: 1.4em;
}

答案

/* font-size为16px，line-height为32px */
.p1 {
  font-size: 16px;
  line-height: 32px;
}
/* font-size为32px，line-height为32px */ /* line-height不存在，继承父值，继承32，32px */
.s1 {
  font-size: 2em;
}
/* font-size为32px，line-height为64px */
.s2 {
  font-size: 2em;
  line-height: 2em;
}

/* font-size为16px，line-height为32px */ /* line-height: 2 是自身字体大小的两倍*/
.p2 {
  font-size: 16px;
  line-height: 2;
}
/* font-size为32px，line-height为64px */ /* line-height不存在，继承原始值，继承2，是自身字体大小的两倍 */
.s5 {
  font-size: 2em;
}
/* font-size为32px，line-height为64px */
.s6 {
  font-size: 2em;
  line-height: 2em;
}

参考

Rem 布局的原理解析

暂无评论