CSS 杂记

单位

px 的问题

在此之前，最常用的单位也许是 px，但是用 px 有个问题，我们先看一下官网的介绍：CSS 的值与单位。

里面说，有些单位是固定长度的单位，比如 cm、 in、 px 等。这些长度对于要打印的设计来说，是比较有用的，但是对于要屏幕展示的网页来说，可能就会有些问题。

比如在谷歌浏览器的设置中，有个项目是外观中的字号，默认的设置是中，但是我们可以设置为大或者特大，以此来整体放大网页的字体（比如适合老年人）。

但是假如说我们编写的网页中，某一段文本的字体大小使用了 px 定义，这时这个字体大小就是固定的，不会受浏览器字号设置的影响。

这不是我们想要的，对于字号大小这一个设置，我们还是希望把控制权交回用户的，而不是我们在一开始就固定。因此我们需要用到一些相对长度的单位。

相对长度单位

常见的相对长度单位有两个，一个是 em，这个单位的定义是这样的：

• 如果 em 被用于 font-size 属性，则其大小是相对于其父元素的 font-size 的大小；
• 如果 em 被用于其他属性，则其大小是相对于本元素的 font-size 的大小。

另一个相对长度单位是 vw 和 vh，也就是相对于显示窗口的宽高。

使用 em 的时候有个问题，就是这个单位是相对于父元素或者本元素的字体大小而定的，有时候不是那么直观。

比如我知道有个 padding 是 0.5em，但是单知道这点无法判断其具体大小，还得看本元素的字体大小是什么，假如看到本元素的 font-size 是 2em，我们依然无法判断其大小，因为还得看父元素的字体大小。

这一层层的，挺麻烦的。因此我们有一个单位叫 rem，它是相对于根元素的字体大小而定的。也就是说甭管两个元素相互隔了多少层，只要它们都是 2rem，那就都一样大。

另外，设置为 rem 单位的字体大小，是可以被浏览器的字号设置影响的。

什么时候用 px

因此大部分时候，都建议使用 rem 或者其他相对长度单位。但是 px 并非就一无是处了，在有个地方还是最好用 px 的，就是边框宽度。

比如 border: 2px solid red 这种。因为我们并不希望边框也随着字号变大而变大，所以这个边框的宽度可以是固定的。

字体

关于字体这块，Google Fonts 就是个很好的免费资源。

我们找到一个字体后，可以使用类似于如下这种的方式使用字体：

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

p {
    font-family: "Roboto", sans-serif;
}