CSS 的单位
CSS中的单位主要分为两大类：绝对单位（固定大小）和相对单位（根据其他元素或视口动态变化）。下面我会详细介绍常用的单位，并说明它们的使用场景。
一、绝对单位
这类单位的大小是固定的，不会因为屏幕尺寸、父元素等因素改变，通常用于打印样式或需要精确控制尺寸的场景。
| 单位 | 名称 | 说明 |
|---|---|---|
px | 像素 | 最常用的绝对单位（在屏幕显示中），1px = 屏幕一个像素点 |
pt | 点 | 打印常用，1pt = 1/72 英寸 ≈ 1.333px |
cm | 厘米 | 物理长度单位 |
mm | 毫米 | 物理长度单位 |
in | 英寸 | 物理长度单位，1in = 96px |
pc | 派卡 | 印刷单位，1pc = 12pt |
示例代码：
css
/* 绝对单位示例 */
.print-box {
width: 5cm; /* 5厘米 */
height: 20mm; /* 20毫米 */
font-size: 12pt; /* 12点，适合打印 */
border: 1px solid #000; /* 1像素边框 */
}二、相对单位
这类单位是CSS布局中最常用的，能让页面适配不同屏幕尺寸，是响应式设计的核心。
1. 相对于父元素的单位
| 单位 | 说明 |
|---|---|
em | 相对于当前元素的字体大小（若无设置，则继承父元素的字体大小），1em = 当前字体大小 |
rem | 相对于根元素（<html>）的字体大小，避免em的嵌套继承问题 |
% | 相对于父元素的对应属性值（如 宽度% 相对于父元素宽度，高度% 相对于父元素高度） |
示例代码：
css
/* 根元素设置基础字体大小 */
html {
font-size: 16px; /* 基础字号，1rem = 16px */
}
/* rem示例：2rem = 32px */
.title {
font-size: 2rem;
}
/* em示例：父元素font-size=16px，1.5em=24px */
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 24px */
width: 50%; /* 宽度为父元素的50% */
}2. 相对于视口（浏览器窗口）的单位
| 单位 | 说明 |
|---|---|
vw | 视口宽度的1%，100vw = 整个视口宽度 |
vh | 视口高度的1%，100vh = 整个视口高度 |
dvh | 动态视口高度，解决传统 vh 在移动端被导航栏遮挡的问题，仅计算 “实际可用视口高度” |
vmin | 视口宽度/高度中较小值的1%（适配横竖屏） |
vmax | 视口宽度/高度中较大值的1% |
示例代码：
css
/* 视口单位示例 */
.hero-section {
height: 100vh; /* 占满整个视口高度 */
width: 80vw; /* 占视口宽度的80% */
}
/* 适配横竖屏：始终是视口较小边的50% */
.card {
width: 50vmin;
height: 50vmin;
}3. 其他特殊单位
| 单位 | 说明 |
|---|---|
ch | 相对于数字 "0" 的宽度（常用于等宽文本布局） |
ex | 相对于小写字母 "x" 的高度（较少使用） |
fr | 网格布局（Grid）中的份数单位，用于分配剩余空间（如grid-template-columns: 1fr 2fr） |
cqw | 容器查询宽度：基于 “最近容器” 的宽度计算（1cqw = 容器宽度的 1%） |
示例代码：
css
/* ch单位：适配等宽文本 */
.input {
width: 20ch; /* 适合输入20个字符的宽度 */
}
/* fr单位：Grid布局分配空间 */
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr; /* 第一列1份，第二列2份 */
gap: 10px;
}总结
| 单位类别 | 核心特性 | 代表单位 | 适用场景 |
|---|---|---|---|
| 绝对单位 | 尺寸固定，不受环境影响 | px、pt、cm、mm、in | 固定尺寸元素、打印样式 |
| 视口相对单位 | 基于浏览器视口大小计算 | vw、vh、vmin、vmax、dvh | 响应式布局、全屏组件 |
| 字体相对单位 | 基于字体大小继承计算 | em、rem、ex、ch | 文本排版、组件内部适配 |
| 特殊场景单位 | 针对特定布局 / 功能设计 | %、fr、cqw、rpx | 网格布局、容器查询、小程序 |
关键原则：静态场景用绝对单位，动态适配用相对单位，特殊场景用专属单位。