CSS 单位速查表

这是关于何时使用每个 CSS 单元的观点，如果是的话，请随意并鼓励您提出不同意见并进行辩论。

TL;DR

快速眼动

• 字体大小
• 间距
• 边框半径

电磁波

• 字母间距
• 媒体查询

苯二甲酸

• 边框宽度
• 阴影

其他单位

• z-index（整数）
• 行高（整数）
• 尺寸（％）

CSS 单位

你有没有想过在特定情况下应该使用什么 CSS 单位？如果是的话，这份速查表绝对能帮到你！

市面上有许多其他单位，我们始终希望应用所谓的“最佳实践”。因此，我制作了这份速查表，每当我需要制定新的或新的……时，我em都会查阅rem它。pxthemedesign tokens

设计令牌是构建和维护设计系统所需的所有值——间距、颜色、排版、对象样式、动画等——由Adob​​e提供

快速眼动

rem是一个相对 CSS 单位，会根据根元素的字体大小进行缩放。也就是说，它会使用标签下定义的字体大小html进行计算。

这个单位为什么有用？

单位的主要目的rem与其随文档字体大小的缩放有关，这意味着如果用户在浏览器设置中更新字体大小（是的，有这个功能），并且如果排版是用rem单位定义的，那么一切都会按预期缩放！

那么我应该在哪些场景下使用rem？

你可以把它想象成“每当我想根据字体大小缩放内容时”。最后，design tokens你应该在以下情况下使用此单位：

• 字体大小- 这样字体大小就会随着用户定义的字体大小设置而缩放。

• 间距- 此处design token包含了所有用于在元素之间添加间距感的 CSS 属性，例如margin或padding。对于这些属性，我发现让它随着根元素的字体大小缩放会很有用，这样就能向用户显示相同的视觉和层次效果。

• 边框半径- 此单位最有意义，rem因为定义了它的“盒子”元素通常会包裹同样在中定义的内容rem，这样就可以方便地使用字体大小来缩放这种“圆角”效果。

电磁波

em是一个相对 CSS 单位，会根据父元素的字体大小进行缩放。也就是说，如果一个元素的字体大小为2em，则其字体大小将是其父元素的两倍。

这个单位为什么有用？

em当你想根据当前定义的字体大小缩放某些内容时，单位非常有用。图标就是一个很好的例子，大多数情况下，你会希望图标的大小与它们所在上下文中定义的字体大小相对应。

那么我应该在哪些场景下使用em？

这个单位在很多情况下都不太有用，主要是当你想根据上下文的字体大小来缩放属性时。

• 字母间距-letter-spacing顾名思义，与字母本身相关，因此它应该根据该父元素定义的字体大小进行缩放。

• 媒体查询- 由于多种原因，我就不一一赘述了。em它是媒体查询中最常用的单元，并且在所有浏览器中都能很好地运行。您可以在这篇详尽的博客文章中了解更多关于此主题的信息。

苯二甲酸

px一直是 Web 开发中最常用的 CSS 单位。它是一个绝对单位，1px代表 1 英寸的 1/96。

这个单位为什么有用？

px当你希望某些东西保持静态，并且不根据定义的字体大小等因素而改变时，单位很有用。

那么我应该在哪些场景下使用px？

说到“快速构建，无需过多思考”，这个单元无疑是最佳选择。但事实上，这个单元的实际应用场景并不多。

• 边框宽度- 就边框而言，您通常只是希望它们能够增加某种强调或分隔上下文，因此您实际上不需要它们根据任何东西进行缩放。

• 阴影- 我们通常使用阴影来营造一种高度感或创建某种堆叠效果，这是我们不需要缩放事物的情况。

其他单位

design tokens对于定义像z-index、line-heights或 这样的值的特定用例sizes，我倾向于不使用上述任何单位，而是使用以下“杂项”：

整数

• Z-index - 对于这个 CSS 属性，您只能使用一个整数，因此在这方面没有太多可说的。
• Line-height - Line-height 的值取决于定义的 font-size，其工作原理与em单位类似。但无需指定任何 CSS 单位，因为指定一个整数（例如 ）line-height: 2;将得到一个 line-height 值，即 font-size 的两倍。

％ 价值

• 尺寸- 此设计令牌包括width和height，并且具有预定义的 % 值（如width: 50%或height: 75%），通常是我认为最有用的。

结论

在当今的 Web 开发中，px如果您想让用户满意，那么将其用作每个其他属性的 CSS 单元并不是一个真正的选择。

用户应该可以选择更新他们的浏览器设置，并且仍然可以在您的网站上获得相当不错的体验，考虑到这一点，请确保您为每个属性使用适当的 CSS 单元，并提供出色的体验！