rem/em

响应式布局，我们可以这样做：

// .title选中大标题“11 powerful examples of responsive web design”
// .logo选中右上角logo
@media screen and (max-width: 768px) {
  .title {
    font-size: 40px;
  }
  .logo {
    width: 160px;
    height: 160px;
  }
}
@media screen and (min-width: 768px) {
  .title {
    font-size: 50px;
  }
  .logo {
    width: 200px;
    height: 200px;
  }
}

单位 rem 和 px 之间的转换

使用 rem 作为单位时，rem 和 px 之间的转换比取决于页根元素（html>/html>）的字体大小，简单来说：1rem = 根元素的字体大小。

一般浏览器中根元素的字体默认大小为 16px，有些情况下可能为其他大小。
拿上面的例子来说，假设现在浏览器的默认字体大小为 16px，当浏览器宽度 width <= 678px 时，标题的大小为 40px，如果用 rem 表示应该是 2.5rem（2.5 * 16px = 40px）。

1rem = 16px;
2.5rem = 40px;

一般浏览器中根元素的字体默认大小为 16px，有些情况下可能为其他大小。最小显示字体一般为 10px，即设置10px以下的数值，比如 6px、8px 等是没有用的，显示的时候都会按照 10px 的大小进行显示，除非用到了css中的transform（这个另当别论）。

单位 rem 的使用
知道了rem 和 px 之间的转换，我们就可以简化文章开头讲到的问题了：

// .title选中大标题“11 powerful examples of responsive web design”
// .logo选中右上角logo
@media screen and (max-width: 768px) {
  html {
    font-size: 16px;
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: 20px;
  }
}

.title {
  font-size: 2.5rem;
}
.logo {
  width: 10rem;
  height: 10rem;
}

这里我们用 rem 写标题的字体和 logo 的大小，然后通过媒体查询设置不同宽度下根元素（）的字体大小，间接改变标题的字体大小和logo的大小，这样媒体查询里就只需要设置根元素的字体大小就可以了：

浏览器宽度 <= 678px 时，根元素 font-size 设置为 16px，此时：
标题的字体大小为 2.5 * 16px = 40px；
标题的字体大小为 2.5 * 16px = 40px；
浏览器宽度 > 678px 时，根元素 font-size 设置为 20px，此时：
标题的字体大小为 2.5 * 20px = 50px；
logo 的宽高为 10 * 20px = 200px；

除了 rem 外，还有个长得很像的单位：em。
单位：em
rem 是相对于根元素的字体大小转换的。em 则是根据父元素的字体大小转换的。

<div class="parent">
  父元素中的文字
  <div class="child">
    子元素中的文字
  </div>
</div>

.parent {
  // 父元素的字体大小为 20px
  font-size: 20px;

  > .child {
    // 子元素的字体大小为 0.7 * 20px = 14px
    font-size: 0.7em; 
    // 特别注意：子元素的宽度为 10 * 14px = 140px
    width: 10em;
  }
}

子元素的 em 转换分两种：

这里的 1em 和父元素的字体大小相同，为20px，故而子元素的字体大小为0.7 * 20px = 14px；
2. 子元素的宽度：10em

这里的 1em 和子元素的字体大小相同，为14px，故而子元素的宽度为10 * 14px = 140px；

既然上面两种情况下 1em 对于的 px 值不同，那要怎么理解“em 是根据父元素的字体大小转换的”这句话呢？其实，子元素中除了font-size属性外，其他属性计算的时候是根据子元素本身的字体大小计算的，但由于子元素本身的字体大小是根据父元素的字体大小计算的，所以可以认为 em 是根据父元素的字体大小转换的。

因为 em 是相对父元素字体大小进行计算的，所以这里就暴露了一个问题，如果在多层嵌套中使用 em，那么计算的时候就会产生级联反应，一旦嵌套过多，很容器计算出错：

<div class="parent">
  父元素中的文字
  <div class="child">
    子元素中的文字
    <div class="grandchild">
      孙子元素中的文字
    </div>
  </div>
</div>

.parent {
  // 父元素的字体大小为 20px
  font-size: 20px;

  > .child {
    // 子元素的字体大小为 0.7 * 20px = 14px
    font-size: 0.7em; 
    // 特别注意：子元素的宽度为 10 * 14px = 140px
    width: 10em;
    > .grandchild {
      // 孙子元素的字体大小为 2 * 14px = 28px
      font-size: 2rem;
    }
  }
}

weixin_43117402

发布了42 篇原创文章 · 获赞 3 · 访问量 576

私信关注

猜你喜欢