常见的CSS单位有哪些CSS 单位主要分为以下几类，每种单位都有其特定的使用场景：一、绝对单位（固定大小）这些单位在

CSS 单位主要分为以下几类，每种单位都有其特定的使用场景：

一、绝对单位（固定大小）

这些单位在物理世界中是固定的，与设备无关。

单位	名称	说明	使用场景
px	像素	屏幕上的一个像素点	最常用，边框、细线、精确控制
cm	厘米	1cm = 37.8px	打印样式（物理尺寸）
mm	毫米	1mm = 0.1cm	打印样式
in	英寸	1in = 96px = 2.54cm	打印样式
pt	点	1pt = 1/72in ≈ 1.33px	打印样式（字体大小传统单位）
pc	派卡	1pc = 12pt	印刷排版

二、相对单位（相对于其他值）

这些单位相对于其他长度或视口尺寸，更具响应性。

相对于字体大小

单位	说明	示例
em	相对于当前元素的字体大小	如果元素字体为16px，2em=32px
rem	相对于根元素(html) 的字体大小	通常html为16px，1rem=16px
ex	相对于当前字体的x高度（小写x高度）	较少使用
ch	相对于数字"0"的宽度	适合等宽字体布局

相对于视口（Viewport）

单位	说明	使用场景
vw	视口宽度的1%	`50vw` = 视口宽度的一半
vh	视口高度的1%	`100vh` = 视口全高
vmin	视口较小尺寸的1%	在横屏时取高度，竖屏时取宽度
vmax	视口较大尺寸的1%	在横屏时取宽度，竖屏时取高度

相对于父元素

单位	说明
%	相对于父元素的对应属性值（宽度相对于父宽，高度相对于父高）

三、CSS Grid 专用单位

单位	说明
fr	网格布局中的弹性单位，分配剩余空间

四、功能单位

单位	说明
calc()	计算表达式，如 `calc(100% - 20px)`

常用单位对比与使用场景

px vs rem/em

/* px - 绝对固定 */
.button {
  padding: 10px; /* 永远是10像素 */
  font-size: 14px;
}

/* rem - 相对于根元素 */
:root {
  font-size: 16px; /* 1rem = 16px */
}
.button {
  padding: 1rem; /* 16px */
  font-size: 0.875rem; /* 14px (16×0.875) */
}

/* em - 相对于自身或父元素字体 */
.card {
  font-size: 16px;
}
.card__title {
  font-size: 1.5em; /* 24px (16×1.5) */
  margin-bottom: 0.5em; /* 12px (24×0.5) */
}

视口单位实用示例

/* 全屏背景 */
.hero {
  width: 100vw;
  height: 100vh;
}

/* 响应式标题 */
h1 {
  font-size: calc(1.5rem + 2vw); /* 最小1.5rem，随视口增大 */
}

/* 保持正方形 */
.square {
  width: 50vmin; /* 总是视口较小尺寸的50% */
  height: 50vmin;
}

百分比的不同行为

.container {
  width: 500px;
  height: 300px;
}

.child {
  width: 50%; /* 250px - 相对于父元素宽度 */
  height: 50%; /* 150px - 相对于父元素高度 */
  padding: 10%; /* 50px - 也相对于父元素宽度！ */
  font-size: 100%; /* 继承父元素字体大小 */
}

现代开发最佳实践

1. 移动端优先响应式

:root {
  font-size: 16px; /* 桌面默认 */
}

@media (max-width: 768px) {
  :root {
    font-size: 14px; /* 移动端调小 */
  }
}

/* 使用rem实现全局缩放 */
body {
  font-size: 1rem; /* 响应式变化 */
  line-height: 1.5;
}

h1 {
  font-size: 2.5rem; /* 40px在桌面，35px在移动端 */
  margin-bottom: 1rem;
}

2. CSS变量与calc()结合

:root {
  --spacing-unit: 1rem;
  --container-width: 1200px;
}

.container {
  width: min(100% - 2rem, var(--container-width));
  margin-inline: auto;
}

.grid {
  gap: calc(var(--spacing-unit) * 2); /* 2rem */
}

3. 常见场景推荐

场景	推荐单位	理由
字体大小	`rem` + `em`	可访问性好，易于整体缩放
间距/内边距	`rem`	与字体比例协调
布局宽度	`%`, `vw`, `fr`	响应式适应
全屏/英雄区域	`vh`/`vw`	完美视口适配
细边框/阴影	`px`	保持精确性
Grid/Flex布局	`fr`, `%`, `auto`	灵活分配空间
媒体查询	`em`	基于字体而非像素更可靠

注意事项

em的继承链陷阱：em会层层相乘，可能导致意想不到的放大
rem的js控制优势：可以通过JS动态修改根字体大小实现主题缩放
vw/vh的滚动条问题：100vw包含滚动条宽度，可能导致横向滚动条
移动端vh的地址栏问题：移动浏览器地址栏会影响vh计算
兼容性：所有现代浏览器都支持上述单位，但部分旧版IE对rem/vw支持有限

总结建议

主用rem：用于字体、间距、大部分尺寸
辅用vw/vh：用于全屏布局、视口相关元素
慎用em：只在确实需要相对于当前字体时使用
巧用% ：布局宽度、高度相对父元素时使用
专用px：边框、阴影等需要精确到像素时使用
现代布局：Grid用fr，Flex用弹性比例

这样的组合可以在保证设计精确性的同时，实现优秀的响应式和可访问性。