CSS提供了多样的单位，用于定义元素的尺寸、间距、字体大小等。除了常见的单位，还有一些不太常用但非常有用的单位，可以让你更灵活地控制页面的布局和样式。
1. vw、vh单位
- 描述：
vw表示视窗宽度的百分比，vh表示视窗高度的百分比。 - 示例：
.container { width: 50vw; height: 80vh; } - 作用：适用于响应式设计，根据视窗大小调整元素尺寸。
2. rem单位
- 描述：
rem表示相对于根元素（html）字体大小的单位。 - 示例：
body { font-size: 16px; } .container { width: 20rem; } - 作用：适用于构建相对于根元素字体大小的布局，特别适合移动端。
3. ch单位
- 描述：
ch表示数字 "0" 的宽度，通常用于固定字符宽度的布局。 - 示例：
.fixed-width { width: 20ch; } - 作用：适用于需要精确字符宽度的场景，如等宽字体排列。
4. vmin、vmax单位
- 描述：
vmin表示视窗宽度和高度中较小者的百分比，vmax表示较大者的百分比。 - 示例：
.fit-container { width: 50vmin; height: 50vmin; } - 作用：根据视窗的最小或最大尺寸设置元素大小，常用于创建等比例的容器。
5. ex单位
- 描述：
ex表示当前字体尺寸的“x”高度。 - 示例：
.half-ex { font-size: 2ex; } - 作用：通常用于垂直方向的相对单位，适用于调整行高或元素的高度。
6. 百分比单位
- 描述：除了常见的宽高百分比外，还可以用于调整其他属性，如
line-height、margin等。 - 示例：
.line-height-150 { line-height: 150%; } .margin-top-10 { margin-top: 10%; } - 作用：利用百分比单位实现相对于父元素或容器的动态调整。
这些单位的多样性赋予了开发者更多的选择和控制权，尤其在响应式设计和移动端开发中，可以更精准地调整样式，提升用户体验。
