CSS 单位参考
所有工具
免费
浏览每个 CSS 单位——绝对单位（px、cm、pt）、字体相对单位（em、rem、ch）、视口单位（vw、dvh）、容器查询单位、网格单位（fr）、角度、时间和分辨率——在可搜索、可按类型筛选的参考中，附描述、“何时使用”提示和可复制的标记。在浏览器中运行，免费。
解释每个 CSS 单位。一切都在您的浏览器中从内置参考运行——不会向服务器发送任何内容。
没有单位匹配您的搜索。
请尝试其他单位或类别——例如 rem、dvh、fr 或 angle。
关于 CSS 单位参考
CSS 单位参考记录了该语言提供的每一种单位——总计 45 种——按类型组织：绝对单位如 px、cm、pt；字体相对单位如 em、rem、ch、lh；视口单位从 vw、vh 到更新的 svh、lvh、dvh；容器查询单位如 cqw、cqi；网格 fr 单位；以及角度、时间、分辨率和百分比单位。
每张卡片提供的不仅仅是一个定义：可复制的等宽单位标记、完整名称、所属类别、通俗易懂的计算方式说明，以及一条实用的“何时使用”提示，告诉你该单位适用于哪些场景——以及在哪些场景下另一个单位更合适。
搜索可匹配单位标记、名称和含义，因此 rem、viewport width 和 root 都能查到对应的单位，类型标签则可将网格筛选到某一具体族群。一切都基于浏览器中的内置参考运行，不会向服务器发送任何数据。
如何使用 CSS 单位参考
- 按单位标记、名称或含义搜索——例如 rem、viewport width 或 angle。
- 使用类型标签，将网格筛选为绝对、字体相对、视口、容器、网格、角度、时间、分辨率或百分比单位。
- 阅读每个单位的说明和“何时使用”提示，选出合适的单位。
- 点击复制按钮，获取用于样式表的单位标记。
常见问题
字体大小以及任何应随用户偏好文字大小缩放的内容都应使用 rem——rem 跟随根字体大小变化，从而使浏览器无障碍设置生效。而对于必须保持视觉恒定的内容（例如细边框），应使用 px。
em 相对于当前元素自身的字体大小，因此嵌套元素会使数值层层复合；rem 则始终相对于根元素，结果更可预测。这就是为什么 rem 已成为间距和字号体系的默认选择。
移动端浏览器会显示和隐藏工具栏，从而改变可见高度，而 vh 始终固定为更大的布局尺寸。动态单位 dvh 会随工具栏移动实时跟踪实际可见高度，svh/lvh 则分别锁定在最小和最大状态。
fr 按比例分配网格容器的剩余空间：grid-template-columns: 2fr 1fr 会让第一列获得第二列两倍的剩余宽度（在扣除固定轨道和间隙之后）。它只存在于网格轨道定义中。
它们相对于元素最近的查询容器（而非视口）来确定尺寸：cqw 是容器宽度的 1%，cqi 是容器内联尺寸的 1%。它们让组件可以根据所在容器缩放，而不受屏幕尺寸影响。
是的。全部 45 种单位都在一个完全运行于浏览器中的页面上免费提供文档——无需注册，也不向服务器发送任何请求。
需要帮助？
使用此工具时遇到问题？请告诉我们的团队。