CSS – rem, em, px

参考:

掘金 – 如何更愉快地使用em —— 别说你懂CSS相对单位

Why don't use px?

很多人说不要用 px, 因为 px 是绝对值.

<body>
  <p class="p1">Hello Worldp>
  <p class="p2">Hello Worldp>
body>

.css

.p1 {
  font-size: 16px;
}

.p2 {
  font-size: 1rem;
}

效果

setting chrome font size

效果

如果用 rem, 那么用户就能依据自己的喜好修改 font size. 比如老人家喜欢看大一些的字.

em

<p><span>Hellospan>p>

p {
  font-size: 50px;
  margin-top: 2em;
}

最终 margin-top = 100px. em 就是当前 element 的 font-size. 所以 2em = 2 x 50px = 100px

效果

em use in font-size

那如果把 em apply 到 font-size 去呢?

body {
  font-size: 50px;
}
p {
  font-size: 2em; /* 2 x 50px = 100px */
  margin-top: 2em; /* 2 x 100px = 200px */
}

在计算 p 的 font-size 时, 会先看本来 p 的 font-size 是多少, 在这个例子里, p 继承 body font-size 50px, 所以是 50px.

然后经过 2em 变成 100px. 最终是 2 x 50px = 100px.

margin-top 又基于 p 的最终 font-size 所以变成了 2 x 100px = 200px

rem

rem 的 r 是 root 的意思, 所以它对标的是 root font-size.

root font-size 指的是 html(不是 body 哦) 的 font-size, 如果没有设定的话, 那它表示游览器的 font-size.

html {
  font-size: 50px;
}
p {
  font-size: 2rem; /* 2 x 50px = 100px*/
}

没有设定 html 的话

p {
  font-size: 2rem; /* 2 x 16px = 32px*/
}

复杂的例子

它的依赖关系是 p > html > browser

这个可以用来做 RWD font-size 哦, 通过 media query 电脑就设置 html font-size 1.125rem, 那么原本 16px 的就变成 18px 了.

html {
  font-size: 1.5rem; /* 1.5 x 16px = 24px*/
}
p {
  font-size: 2rem; /* 2 x 24px = 48px*/
}

配合 em 的复杂例子

html {
  font-size: 1.5rem; /* 1.5 x 16px = 24px*/
}
p {
  font-size: 2rem; /* 2 x 24px = 48px*/
  margin-top: 2em; /* 2 x 48px = 96px */
}