无需登录 数据私有 本地保存

像素单位换算器 - PX/EM/REM/VW 在线互转

9
0
0
0

像素单位换算器

PX / EM / REM / VW 在线互转，前端开发必备单位转换工具。支持自定义基准值，实时联动换算。

px
px
px
快捷填充：
PX 像素
像素单位
EM 相对单位
相对父元素字体
REM 根相对单位
相对根元素字体
VW 视口宽度
相对视口宽度

PX → REM：rem = px ÷ 根字体大小

PX → EM：em = px ÷ 父字体大小

PX → VW：vw = px ÷ 视口宽度 × 100

REM → PX：px = rem × 根字体大小

EM → PX：px = em × 父字体大小

VW → PX：px = vw × 视口宽度 ÷ 100

常见问题与知识点

PX、EM、REM、VW 分别是什么？
PX（像素）是屏幕上的物理像素点，属于绝对单位，1px就是屏幕上的一个像素点，不会随其他元素变化。
EM是相对单位，相对于父元素的字体大小。例如父元素字体为16px，则1em = 16px。EM会继承叠加，嵌套越深值越大。
REM（Root EM）也是相对单位，但始终相对于根元素（html）的字体大小，不受嵌套影响，更易于维护。
VW（Viewport Width）是视口宽度单位，1vw = 视口宽度的1%。在1920px宽屏幕上，1vw = 19.2px。常用于响应式布局。
REM和EM有什么区别？什么时候用哪个？
REM始终以根元素（html）字体大小为基准，不会受DOM层级影响，适合设置全局统一的间距、字体大小，维护成本低。EM以父元素字体为基准，会随嵌套层级叠加，适合组件内部需要按比例缩放的场景（如按钮内图标大小跟随按钮文字）。推荐：全局布局用REM，组件内部微调用EM。
浏览器默认根字体大小是多少？如何修改？
主流浏览器默认根字体大小（html font-size）为16px。可以通过CSS修改：html { font-size: 16px; } 或使用百分比 html { font-size: 62.5%; }（此时1rem = 10px，便于计算）。注意，修改根字体大小会影响所有使用REM的元素。
VW单位适合用在什么场景？有什么注意事项？
VW适合需要随屏幕宽度等比缩放的场景，如全屏Banner、大标题、卡片宽度等响应式设计。注意事项：① 在超宽屏幕（如4K显示器）上VW值会非常大，建议使用clamp()函数限制最小/最大值；② VW不考虑滚动条宽度，100vw可能超出可视区域；③ 移动端横屏/竖屏切换时VW值会变化。
如何将设计稿（如1920px宽）的PX值转换为VW？
公式：vw = px ÷ 设计稿宽度 × 100。例如设计稿宽1920px，某个元素宽200px，则200 ÷ 1920 × 100 ≈ 10.42vw。本工具已内置此换算，只需设置视口宽度为设计稿宽度（默认1920），输入PX值即可自动获得VW值。常见设计稿宽度：1920px（PC端）、1440px（笔记本）、375px（移动端）。
REM和EM的浏览器兼容性如何？
REM和EM都是CSS标准单位，所有现代浏览器均完美支持，包括Chrome、Firefox、Safari、Edge以及移动端浏览器。REM在IE9+支持，EM在IE6+即支持。VW/VH在IE9+部分支持（IE9-11有少量bug），现代浏览器完全支持。PX作为最基础单位，所有浏览器均支持。
为什么有时候用REM计算出来的像素值不准确？
可能原因：① 根字体大小被其他CSS覆盖（检查html元素的font-size实际值）；② 浏览器最小字体限制（部分浏览器限制最小字体为9px或12px）；③ 浏览器缩放（用户手动缩放了页面）；④ 未考虑CSS的zoom或transform: scale()等缩放属性。建议使用浏览器开发者工具检查元素的实际计算值（Computed值）。
实际开发中如何选择使用PX还是REM？
推荐做法：① 字体大小使用REM，便于全局统一调整和用户自定义字体大小（无障碍访问）；② 间距（margin/padding）使用REM，保持与字体的比例关系；③ 边框（border）使用PX，保持1px的精确细线；④ 图标尺寸使用REM或EM，随字体缩放；⑤ 媒体查询断点使用EM或REM（更稳健）。大多数现代CSS框架（如Tailwind CSS、Bootstrap 5）默认使用REM单位。
🔧 相关工具