CSS 单位转换器
免费在线 CSS 单位转换工具。在 px、rem、em、pt、%、vw 和 vh 之间转换，支持自定义基础字号和视口尺寸。
px16px
rem1rem
em1em
pt12pt
%100%
vw0.8333vw
vh1.4815vh
什么是 CSS 单位转换器？
CSS 单位转换器可在不同的 CSS 度量单位之间转换数值，包括像素（px）、根 em（rem）、em、点（pt）、百分比（%）、视口宽度（vw）和视口高度（vh）。理解这些单位之间的关系对于构建能够适应不同屏幕尺寸和用户偏好的响应式网页布局至关重要。
如何使用 CSS 单位转换器
- 在数值字段中输入要转换的数值。
- 从下拉菜单中选择源单位。
- 可选择调整基础字号、视口宽度和视口高度以匹配您的项目设置。
- 查看下方显示的所有支持单位的转换结果。
- 点击任何转换值旁边的复制按钮将其复制到剪贴板。
使用场景
- 从 px 迁移到 rem — 将基于像素的设计转换为 rem 单位，以获得更好的可访问性和可扩展性，使文本大小能够遵循用户浏览器偏好设置。
- 响应式设计计算 — 将像素值转换为视口相对单位（vw、vh），创建随浏览器窗口按比例缩放的流式布局。
- 设计系统实现 — 将 Figma 等设计工具的规格（使用 px）转换为您首选的 CSS 单位，确保组件间的一致实现。
- 打印样式表开发 — 在创建用于打印文档的 CSS 样式表时，在屏幕单位（px、rem）和打印单位（pt）之间转换。
FAQ
rem 和 em 有什么区别？
rem（根 em）相对于根元素（html）的字号，在整个页面中保持一致。em 相对于父元素的字号，嵌套时会产生累积效果。为了可预测的尺寸控制，通常推荐使用 rem。
为什么默认基础字号是 16px？
16px 是大多数浏览器为根 html 元素设置的默认字号。如果没有定义自定义字号，1rem 等于 16px。这是 rem 和 em 计算的标准基准。
什么时候应该使用视口单位（vw/vh）？
视口单位适用于需要随浏览器窗口缩放的元素，如首屏大图、全屏背景或流式排版。1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。
CSS 中的百分比单位如何工作？
在本转换器中，百分比相对于基础字号计算（类似于 font-size 中 em 的行为）。在实际 CSS 中，百分比相对于父元素对应属性的值，具体取决于所使用的属性。