📏 CSS 单位转换器

px ↔ rem

相对单位根元素响应式

px

= 1 rem

rem

= 16 px

当前 1rem = 16px 的视觉预览

rem 相对于根元素 (<html>) 的字体大小，适合响应式布局。

/* px 转 rem */ rem = px / root-font-size

px ↔ em

相对单位父元素继承

父元素 font-size px

px

= 1 em

em

= 16 px

em 相对于当前元素的父元素字体大小，常用于模块内缩放。

/* px 转 em */ em = px / parent-font-size

px ↔ vw/vh

视口单位响应式全屏

视口宽度 px

px

= 10 vw

vw

= 192 px

视口高度 px

vh

= 108 px

vw/vh 相对于视口宽度/高度的 1%，适合全屏和响应式设计。

/* px 转 vw */ vw = (px / viewport-width) * 100

📊 常用值速查表

参考快速查询最佳实践

px	rem (16px)	rem (14px)
8px	0.5rem	0.571rem
10px	0.625rem	0.714rem
12px	0.75rem	0.857rem
14px	0.875rem	1rem
16px	1rem	1.143rem
18px	1.125rem	1.286rem
20px	1.25rem	1.429rem
24px	1.5rem	1.714rem
32px	2rem	2.286rem

常用字体大小在不同根字体下的 rem 值对照。

/* 常用 rem 值 */ h1: 2rem (32px) h2: 1.5rem (24px) p: 1rem (16px)

📈 百分比转换器

百分比相对容器

容器宽度 px

px

= 25 %

%

= 250 px

百分比相对于父容器的宽度/高度。

/* px 转 % */ percent = (px / container-width) * 100

📱 响应式断点

媒体查询断点设备

设备	断点	常用写法
手机	< 576px	@media (max-width: 576px)
平板	576px - 768px	@media (min-width: 576px)
小平板/大手机	768px - 992px	@media (min-width: 768px)
桌面	992px - 1200px	@media (min-width: 992px)
大桌面	> 1200px	@media (min-width: 1200px)

✨ 视口宽度 1920px 时：

1vw = 19.2px

1vh = 10.8px

常用的响应式设计断点参考。

@media (max-width: 768px) {
/* 移动端样式 */
}

💡 单位转换技巧