CSS 中的Vmin CSS单位（em、rem、pt、px、vw、vh、vmin、vmax、ex、ch 等）

CSS 支持多种测量单位。最广为人知的单位是像素，但也有一些不太常用但在某些情况下非常实用的单位。

本文介绍相对单位、绝对单位和视口单位。

媒体	受到推崇的	偶尔使用	不经常使用	不推荐
屏幕	em、rem、%	像素	ch、ex、vw、vh、vmin、vmax	厘米、毫米、英寸、磅、个
打印	em、rem、%	厘米、毫米、英寸、磅、个	ch，例如	像素、宽度、高度、最小宽度、最大宽度

相对单位

与像素、点或厘米等绝对单位不同，您还可以使用百分比、em 或 rem 等相对单位来定义大小。
相对单位也符合无障碍标准。
大多数浏览器的默认字体大小为16px，您可以使用此值作为计算依据（例如，16px 等于 1em、1rem 或 100%）。

单元	描述
％	百分比
em	元素的字体大小（例如 2.5em 表示字体比正常字体大 2.5 倍）
雷姆	文档根元素的字体大小
ch	“0”字符的宽度，在等宽字体中，所有字符的宽度相同，1ch 等于 1 个字符
前任	当前字体的 x 高度，以小写字母 x 的高度测量

区别在于继承关系。rem值基于根元素（html）。每个子元素都以html字体大小作为计算依据。

em另一方面，是基于父元素的字体大小。

rem使字体大小的计算更加简单。对于嵌套元素，甚至多个嵌套元素（例如列表），字体大小不再需要根据父元素的字体大小进行计算。rem始终根据html标签计算字体大小。

所有字体的大小相同（18pt），但红色条表示ex字体的 x 高度（）不同。

字体大小再次相同（18pt）。此图ch比较了字符宽度（）。等宽字体的每个字符宽度相同，而衬线字体或无衬线字体的每个字符宽度可能不同（i比窄o）。

绝对单位的尺寸是固定的，你不能讨论一厘米有多长。如果你需要精确的长度，则应该使用绝对单位（例如，对于不应调整大小的组件）。如果你想定义限制以避免区域过宽或过窄，绝对单位也很有用。绝对单位不会根据屏幕尺寸、方向或其他变化而变化。

视口单位表示当前浏览器视口的百分比。
与百分比单位的区别在于，视口单位始终按浏览器视口大小的百分比计算。而百分比单位会继承其父元素的大小。

vmin并且vmax可以在调整浏览器窗口大小或改变手机方向时发生变化。
vmin是视口高度或宽度之间的最小值（以百分比表示），具体取决于哪个较小。

vmax是视口高度或宽度中的最大值（以百分比表示），具体取决于哪个较大。

如果您喜欢我的内容，您可能想在 Twitter 上关注我？！@fullstack_to