简介

在确定各种css属性的大小时，css有几个使用单位的选项。以一种易于管理且在任何屏幕上看起来都很棒的方式来设计样式，了解您的所有css单元选项可能是关键。

什么是CSS单元？

Css单位确定要为元素或其内容设置的属性的大小。例如，如果您想设置一个段落的属性Edge，您可以给它一个特定值。该值包括css单位。

让我们来看一个小例子：

1p {
2  margin: 20px;
3}

在本例中，nerg是属性，20px；是值，px(或)是css单位。

尽管像‘px’这样的单位经常被使用，但最大的问题往往是在这里使用什么单位最好？

以下是在选择单元类型时需要考虑的一些因素，以及示例用例：

绝对单位与相对单位

在考虑使用哪种单位的所有选项时，重要的是要考虑两类单位：绝对和相对。

绝对单位

无论父元素或窗口大小如何，)

在处理不考虑响应性的项目时，绝对单位可能很有用。例如，无法调整大小的桌面应用程序可以按默认尺寸设置样式。如果窗口没有缩放，您也不需要内容。

<$>[note]提示：绝对单位可能对响应式网站不太有利，因为当屏幕大小改变时，它们不会缩放。<$>

Absolute Unit	Description	Example
px	1/96 of 1 inch (96px = 1 inch)	font-size: 12px;
pt	1/72 of 1 inch (72pt = 1 inch)	font-size: 12pt;
pc	12pt = 1pc	font-size: 1.2pc;
cm	centimeter	font-size: 0.6cm;
mm	millimeter (10 mm = 1 cm)	font-size: 4mm;
in	inches	font-size: 0.2in;

像素(px)通常是屏幕上最常用的绝对单位。厘米、毫米和英寸更常见于印刷品，你可能甚至不知道它们是可选的！

相对单位

相对单位对于设置响应站点的样式非常有用，因为它们相对于父站点或窗口大小进行缩放(取决于单位)。

<$>[注意]一般来说，相对单位可以用作响应站点的默认单位。这可以帮助您避免为不同的屏幕大小更新样式。<$>

相对单位可能比绝对单位更难确定使用哪个单位，所以让我们详细了解一下您的选项。

Relative Unit	Description
%	Relative to the parent element’s value for that property
em	Relative to the current font-size of the element
rem	Relative to the font-size of the root (e.g. the `<html>` element). )
vh	Relative to the height of the viewport (window or app size). 1vh = 1/100 of the viewport’s height
vw	Relative to the width of viewport. 1vw = 1/100 of the viewport’s width.
vmin	Relative to viewport’s smaller dimension (e.g. for portrait orientation, the width is smaller than the height so it’s relative to the width). 1vmin = 1/100 of viewport’s smaller dimension.
vmax	Relative to viewport’s larger dimension (e.g. height for portrait orientation). 1vmax = 1/100 of viewport’s larger dimension.
ex	Relative to height of the current font’s lowercase `x`.

对于每种类型的css属性，并不总是清楚地使用这些选项中的哪一个是最好的。例如，与font-size相比，%通常更适合于与布局相关的属性，如width。

以下是使用每个相对单位时的一些示例。

%：您希望子元素有父元素宽度的10%作为边距，这样它就不会填满整个父元素。如果父项的大小发生变化，边距也会更新。 `css .孩子{ 利润率：10%； }

1* em：您希望子元素的字体大小是其父元素字体大小的一半(例如，节标题下的段落)。
2`css
3.孩子{
4字体大小：0.5em；
5}

rem：字体大小应该是根元素字体的两倍。这可能是您调整标头大小的方法，因为无论父容器是什么，它们的大小都应该相同。 `css .Header{ 字体大小：2rem； }

1* ch：您的字体为单倍行距(字符的宽度始终相同)，并且您只有10个字符的空间。
2`css
3.Small-文本{
4宽度：10ch；
5}

VH：您的登录页面应始终为视区/窗口的高度。 `css .wrapper{ 身高：100vh； }

1* VW：您有一个部分，其文本宽度应为视区/窗口的一半。
2`css
3.半个尺寸的{
4宽度：50VW；
5}

vmin：您的图像应该始终与视区的较小尺寸一样宽。在手机处于纵向模式时，图像将与视窗的宽度一样宽。 `css .最小宽度{ 宽度：100vmin； }

1* Vmax：您并不关心图像是否被截断，因为您希望它完全填满更大尺寸的视区。例如，如果将图案的图像用作背景。
2`css
3.最大宽度{
4宽度：100vmax；
5}

例如：你可能不会经常遇到‘ex’，但它通常是衡量一种字体中段的一个很好的指标。比方说，您希望字体的line-height是字体的x高度的两倍。 `css .Double-x{ 行高：2EX； }

 1
 2---
 3
 4总体而言，何时以及如何选择您的css单位将归结为几个问题：
 5
 6* 我是否希望我正在设置的样式在视区大小更改时进行缩放？
 7* 如果我真的想要它扩展，我希望它相对于应用程序中的什么进行扩展？
 8
 9一旦你回答了这些问题，就很容易确定要使用哪个单位。💪
10
11# 进一步阅读
12
13你可以通过阅读这篇article](https://andsky.com/tech/tutorials/css-viewport-units)，更深入地挖掘[视窗单位]，或者看看这篇[关于em和rem units](https://andsky.com/tech/tutorials/css-rem-vs-em-units)的文章，如果这两个单位之间的区别仍然不清楚的话]。

CSS 单位解释

简介

什么是CSS单元？

绝对单位与相对单位

绝对单位

相对单位