阅读 526

(Ⅲ)搞定 CSS“相对长度单位” | CSS 值和单位

原创:itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归作者所有,未经授权,请勿转载!

本文节选自“语雀”私有专栏「前端一万小时 | 从零基础到轻松就业」
复制代码


🔗紧接上篇文章

3.2 em

1em 被定义为一种给定字体的 font-size 值。

如下例,当 em 用于设置元素的 font-size 属性本身时,em 的值会相对于父元素的字体大小改变。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>前端一万小时</title>
</head>
<body>
  回答问好
  <div class="div1">fine
    <div class="div2">thank you 
      <div class="div3">and you?</div>
    </div>
  </div>
</body>
</html>
复制代码
div {
  font-size: 1.5em;
}
复制代码

计算关系是这样的:

  1. 回答问好 的 font-size 是继承自根元素 <html><html> 的尺寸是浏览器默认尺寸 14px;
  2. fine 的 font-size = 1.5*14px = 21px;
  3. thank you 的 font-size = 1.5*21px = 31.5px;
  4. and you? 的 font-size = 1.5*31.5px = 47.25px。

如果手动设置 thank you 的 font-size 为 40px,那么 and you? 的 font-size 应该为 1.5*40px = 60px。

但,由于 em 的值会随元素的不同而发生变化,这给计算带来极大的困难。于是,就产生了 rem 这个相对单位。

3.3 rem

rem——root em 是相对于根元素 <html> 的字体大小单位。

例如还是上面的 HTML 代码,添加如下样式:

.div3 {
  font-size: 1.5rem;
}
复制代码

此时 and you? 的 font-size = 1.5*14px = 21px = 1.5 * html 的 font-size。

3.4 ex

ex 是一个相对长度单位,1ex 被定义为一种给定字体的小写字母 “x” 的高度。因此,这个值会随字体的不同而变化。

然而,很多浏览器都没有内置 ex 高度值,只是简单的取 em 的值,再取其一半作为 ex 的值。所以,一般不推荐使用 ex 这个长度单位。

3.5 视口单位 vw、vh、vmin、vmax

3.5.1 vw

视口宽度的 1/100。

3.5.2 vh

视口高度的 1/100。

例如,桌面端浏览器视口尺寸为 650px,那么 1vw = 650 * (1/100) = 6.5px (这是理论推算得出,一般浏览器不支持 0.5px,那么实际渲染结果可能是 7px)。

3.5.3 vmin

vw 和 vh 中的最小值。

3.5.4 vmax

vw 和 vh 中的最大值。

例如,浏览器的宽度设置为 1200px,高度设置为 800px, 1vmax = 1200/100px = 12px, 1vmin = 800/100px = 8px。如果宽度设置为 600px,高度设置为 1080px,1vmin 就等于 6px,1vmax 则为 10.8px。



后记: CSS 值和单位包含的面很广,细小的知识点还有很多,且各个单位也各有优缺点,需要在具体情况下酌情使用。不必一蹴而就,慢慢来,慢慢地把各个知识点击破。

祝好,qdywxs ♥ you!

关注下面的标签,发现更多相似文章
评论