CSS 单位转换器

CSS 单位转换器 - px、rem、em、% 计算器

🎨 在 CSS 单位之间转换：像素（px）、rem、em、百分比（%）、磅（pt）以及视口单位（vw、vh）。 这是响应式网页设计与开发的必备工具。

CSS 单位类型

• 绝对单位： px、pt、cm、mm、in — 不受上下文影响的固定尺寸
• 相对单位： rem、em、%、vw、vh — 根据父级或视口缩放
• 相对字体： rem、em、ch、ex — 基于字体大小
• 相对视口： vw、vh、vmin、vmax — 基于视口尺寸

单位说明

• px（像素）： 1px = 1 个设备像素。绝对单位，精确但不易缩放。
• rem： 相对于根元素（html）的字体大小。默认 1rem = 16px。
• em： 相对于父元素字体大小。在嵌套元素中可能叠加。
• %： 相对于父元素属性。100% = 与父元素相同。
• pt（磅）： 印刷单位。1pt = 1/72 英寸 ≈ 1.333px。
• vw： 1vw = 视口宽度的 1%。100vw = 全宽。
• vh： 1vh = 视口高度的 1%。100vh = 全高。

常见换算

• 1rem = 16px（浏览器默认设置）
• 1em = 16px（若父级为 16px）
• 100% = 父元素尺寸
• 12pt = 16px（印刷中常见）
• 1vw = 19.2px（视口 1920px 时）

62.5% 方法

设置 html { font-size: 62.5%; } 让 1rem = 10px，从而简化计算：1.6rem = 16px、2.4rem = 24px 等。

可访问性（Accessibility）

• 字体使用 rem： 尊重用户的浏览器字体大小偏好
• 避免字体用 px： 不会随用户设置缩放
• 使用相对单位： 更利于缩放/放大阅读
• 多尺寸测试： 检查 200% 缩放与大字体设置

响应式设计

Media query 建议使用 rem：@media (min-width: 48rem) 而不是 768px。这样断点会随用户字体大小偏好缩放。

💡 专业建议： 现代最佳实践是大部分尺寸（字体、间距、断点）用 rem， 边框与细节用 px，布局用 % 或视口单位。尽量不要用 em 做间距，以免在嵌套中产生叠加。