CSS 单位转换
将 CSS 像素值 (px) 转换为 rem、em、pt、vw、vh 等常用单位。可自定义基准 font-size,提供可视化对比和批量转换功能。
rem
1rem
16px / 16 = 1rem
em
1em
16px / 16 = 1em
pt
12pt
16px * 0.75 = 12pt
vw
0.83vw
16 / 1920 * 100 = 0.83vw
vh
1.48vh
16 / 1080 * 100 = 1.48vh
% (基于基准)
100%
16 / 16 * 100 = 100%
批量转换
常用断点参考
| 设备 | 断点 (px) | rem (16px基准) | 说明 |
|---|---|---|---|
| 手机 | 320px | 20rem | 小屏手机 |
| 手机横屏 | 480px | 30rem | 大屏手机 |
| 平板 | 768px | 48rem | iPad 竖屏 |
| 笔记本 | 1024px | 64rem | 小屏笔记本 |
| 桌面 | 1280px | 80rem | 标准桌面 |
| 大屏 | 1536px | 96rem | 大屏显示器 |
| 超宽 | 1920px | 120rem | Full HD |
| 4K | 3840px | 240rem | 4K 显示器 |