👉🏼 在我的网站上阅读这篇文章。 这里👈🏼
CSS中的每个属性都有一个值，CSS单位有一个作用，决定你设置的内容或元素的属性大小。
让我用一个简单的例子向你证明
h1 { font-size: 16px }
当我们尝试提取上面的代码时。我们会得到字体大小这个属性，16是数值，**px（像素）**是一个单位。
这是个好的开始。现在，你知道CSS的单位是什么了👍🏼
绝对单位VS相对单位
单位是 绝对单位总是一样的，不管它在哪里被定义。
绝对单位
绝对单位在响应式网站中不能很好地缩放，因为当屏幕尺寸更新时，其数值不会改变。
CSS绝对单位
px(像素)
px单位是CSS中最常见或最广泛使用的单位。1px可以定义为一英寸的1/96。
pt（点）/pc（皮卡）
1pt和1pc可以分别被定义为1/72和1/6英寸。不幸的是，这两个单位没有被广泛使用，但在印刷业中却被普遍使用。 (@media print rule)
cm（厘米）/mm（毫米）/in（英寸）
如果你看的是真实世界的测量单位。这三个单位可能适合你。它们主要用于印刷行业的打印机。 类似于pt(点)和pc(皮卡)。.
相对单位
单位是 相对是基于某种东西，可能是父元素、当前字体大小等。
在与各种屏幕尺寸互动时，相对单位可以很方便。如果你的网站是响应式的，你应该考虑一下你的相对单位。
CSS相对单位
% (百分比)
最容易识别的相对单位。％（百分比单位）是相对于该属性的父元素值而言。
em
em单位将是相对于其父字体大小而言的。例如，如果父元素的字体大小等于 6px 而你把孩子的字体大小设置为 2em.孩子的字体大小等于16 x 2 = 32px
rem
类似于 emrem的单位也是相对于字体大小的，但对于根元素来说，它是相对的。 ******如果没有特定的字体大小。浏览器会默认为 16px.
ch
这个单元有点复杂。让我用一个简短的解释向你说明👇🏼。
ch unit is relative to the width of the "0" (zero)
这是正确的，但还有一些信息。
ch单位是相对于任何字体中的 "0 "字符的宽度而言的。 在Monospace（固定宽度）字体中。所有字符都有相同的宽度。1ch表示一个字符，但对于其他（可变宽度）字体，任何给定的字符都可能比 "0 "字符更大或更窄。
CSS ch单位
你可以看到，所有的元素在 速写体字体的宽度与文本内容完全相同。 草书font，只有数字的宽度与内容相同。
前
同样，ex单位将处理单空格（固定宽度），它指的是元素字体的x高度，通常是指小写 "x "字符的高度。
x-高度
ex单位很少使用。它并不总是按照你所期望的方式行事。所以，当你要使用这个单位时要注意。
vh / vw
其余的单位 ***(vh/vw/vmin/vmax)***将与视口的大小相对应。
vh单位是相对于视口高度的，1vh等于视口高度的1%。
vw单位是相对于视窗宽度，1vw等于视窗宽度的1%。
vmin / vmax
vmin单位是相对于视窗 最小边的宽度或高度。
例如，如果视口尺寸的宽度小于其高度，1vmin可以是1vw，当视口的高度小于其宽度，1vmin等于1vh。
相反，vmax单位是相对于视图的 最大边 ，无论是宽度还是高度。就这样了。
结论
你应该考虑的一件事是为你的项目选择合适的单位。如果你确实需要你的风格是可扩展的或响应的。 相对的单位是你的选择。否则。 绝对unit。
希望这篇文章能帮助你更新你的CSS单元知识💪🏼
CSS单元解释》最初发表在《Dev Genius》杂志上，人们通过强调和回应这个故事来继续对话。
