📐 CSS单位转换器📐 CSS Unit Converter
支持px、rem、em、vw、vh、pt、cm、mm、in之间实时互转Convert between px, rem, em, vw, vh, pt, cm, mm, in in real-time
🔢 数值输入Value Input
⚙️ 基准设置（用于相对单位计算） ⚙️ Base Settings (for relative units)
📊 转换结果Conversion Results
📱 响应式预览Responsive Preview
当前值在不同屏幕宽度下的实际像素值 Actual pixel values at different screen widths
📋 CSS单位速查表CSS Units Quick Reference
| 单位Unit | 说明Description | 基准Base | 1单位 = ? px |
|---|---|---|---|
| px | 像素，绝对单位Pixels, absolute | - | 1px |
| rem | 根元素字体大小Root element font size | 16px | 16px |
| em | 父元素字体大小Parent element font size | 16px | 16px |
| vw | 视口宽度的1%1% of viewport width | viewport | ~3.75px (基于375px) |
| vh | 视口高度的1%1% of viewport height | viewport | ~6.67px (基于667px) |
| % | 父元素的百分比Percentage of parent | parent | variable |
| pt | 磅，印刷单位Points, print unit | 1pt = 1.333px | 1.333px |
| cm | 厘米Centimeters | 1cm = 37.8px | 37.8px |
| mm | 毫米Millimeters | 1mm = 3.78px | 3.78px |
| in | 英寸Inches | 1in = 96px | 96px |
什么是CSS单位转换器？
CSS单位转换器是前端开发者在日常编码中频繁使用的实用工具，用于在不同CSS长度单位之间进行精确换算。CSS支持的长度单位种类繁多：绝对单位（px）、相对单位（em、rem、ex、ch）、视口单位（vw、vh、vmin、vmax）、百分比（%）等。每种单位有其特定的使用场景和计算规则，理解并正确转换这些单位是编写响应式布局的基础。本工具支持所有主流CSS单位的相互转换，帮助开发者快速计算出在不同上下文中的精确像素值，避免因单位使用不当导致的布局问题。
如何使用CSS单位转换器
- 输入数值 — 填入需要转换的数值，如16。
- 选择源单位和目标单位 — 选择输入值使用的单位（如px）和要转换到的单位（如rem）。
- 查看结果 — 工具会根据基准字体大小实时计算并显示转换结果。可以调整基准字体大小（默认16px）来改变换算基准。
常见使用场景
场景一：px到rem转换
设计稿标注的尺寸都是px，但项目规范要求使用rem。输入基准字体大小（如16px），快速将px值转换为rem。
场景二：响应式布局单位选择
在vw和百分比之间选择响应式方案时，计算不同视口宽度下各单位的实际像素值，评估哪个更适合当前需求。
场景三：em嵌套计算
em单位相对于父元素字体大小计算，多层嵌套时容易混淆。通过转换器可以快速确定最终的实际大小。
技术原理
CSS单位的计算基准各不相同：
/* CSS长度单位分类 */
/* 绝对单位 */
px: 像素（CSS像素，非物理像素）
/* 相对单位 */
em: 相对于父元素的font-size
rem: 相对于根元素(html)的font-size
ch: 相对于当前字体"0"字符的宽度
ex: 相对于当前字体x-height
/* 视口单位 */
vw: 视口宽度的1%
vh: 视口高度的1%
vmin: vw和vh中较小的
vmax: vw和vh中较大的
/* 转换公式 */
/* px → rem: rem = px / rootFontSize */
/* rem → px: px = rem × rootFontSize */
/* px → em: em = px / parentFontSize */
/* px → vw: vw = (px / viewportWidth) × 100 */最佳实践与注意事项
- 推荐使用rem而非em作为主要长度单位，避免em在嵌套元素中的累积效应。
- 字体大小建议使用rem，组件内部间距可以用em以保持与字体的比例关系。
- DPR（设备像素比）影响物理像素与CSS像素的关系：iPhone的1px可能对应2或3个物理像素。
- 设置html的font-size为62.5%（即10px）可以简化rem计算，但部分浏览器有最小字体限制。
常见问题
Q：1rem等于多少px？
A：默认情况下1rem=16px（浏览器默认根字体大小为16px）。但如果html元素的font-size被修改（如设置为10px或18px），则1rem等于该修改后的值。
Q：em和rem有什么区别？
A：rem始终相对于根元素（html）的字体大小，em相对于最近的父元素的字体大小。em在嵌套时会累积：如果父元素font-size为1.5em，子元素的1em实际是1.5×16=24px。rem不会有此问题。
Q：vw在移动端可靠吗？
A：基本可靠，但注意iOS Safari的地址栏收缩会导致vh变化（100vh≠实际可见高度）。现代方案是使用dvh（动态视口高度）或svh（小视口高度）来解决。
Q：如何将设计稿的px转为rem？
A：假设设计稿宽度750px，基准font-size设为16px。转换公式：rem值 = 设计稿px值 ÷ 16。例如设计稿标注32px，则32÷16=2rem。也可以将基准设为10px简化计算。
Q：CSS像素和物理像素有什么区别？
A：CSS像素是抽象单位，物理像素是屏幕实际像素点。在2x DPR屏幕上，1个CSS像素对应2×2=4个物理像素。这就是为什么Retina屏幕上的1px边框看起来更细。