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

CSS单位换算器 - px, em, rem, vw在线互转

11
0
0
0

CSS 单位换算器

px · em · rem · vw 实时互转，前端开发必备

→
px
px
小数位数：
PX · 像素 16 — 点击复制
EM · 相对单位 1 — 点击复制
REM · 根元素相对 1 — 点击复制
VW · 视口宽度 0.8333 — 点击复制
常用换算速查（基准16px / 视口1920px）
PXEMREMVW
8px0.5em0.5rem0.4167vw
12px0.75em0.75rem0.625vw
16px1em1rem0.8333vw
24px1.5em1.5rem1.25vw
32px2em2rem1.6667vw
48px3em3rem2.5vw
64px4em4rem3.3333vw
常见问题 & 知识点
px、em、rem、vw 分别是什么？

px（像素）：绝对单位，1px等于屏幕上的一个物理像素点（在高DPI屏幕上为CSS参考像素）。是最常用的固定尺寸单位。

em：相对单位，相对于当前元素的 font-size。例如父元素 font-size: 16px，则 1em = 16px。具有级联特性，嵌套时会叠加。

rem（root em）：相对单位，相对于根元素 <html> 的 font-size。浏览器默认根字号为 16px，1rem = 16px。不受嵌套影响，更易维护。

vw（viewport width）：视口宽度单位，1vw = 视口宽度的 1%。例如视口宽1920px时，1vw = 19.2px。适合响应式布局。

rem 和 em 的核心区别是什么？

em 相对于当前元素或其父元素的 font-size，具有级联继承特性。嵌套使用 em 时，值会逐层放大或缩小，可能导致难以预期的结果。

rem 始终相对于根元素 <html> 的 font-size，全局统一，不受嵌套影响。这使得 rem 在大型项目中更易于维护和预测。

示例：根字号16px，父元素设1.5em(24px)，子元素设1.5em = 36px（级联放大）。若改用rem，子元素1.5rem始终=24px。

建议：全局间距、字体大小用 rem；组件内部需要随父级缩放的场景用 em（如按钮内图标大小）。

浏览器默认字体大小是多少？如何修改？

所有主流浏览器的默认根字体大小为 16px。用户可以在浏览器设置中调整默认字号（如放大到20px），这会影响所有使用 rem/em 的元素。

开发者通常会在CSS中显式设置根字号：

html { font-size: 16px; } /* 或使用百分比 */
html { font-size: 62.5%; } /* 62.5% × 16px = 10px，便于计算 */

使用 62.5% 技巧后，1rem = 10px，心智负担更低（如1.6rem = 16px）。

62.5% 字体大小技巧是什么？有什么优缺点？

设置 html { font-size: 62.5%; } 使得 1rem = 10px（因为浏览器默认16px × 62.5% = 10px）。

优点：计算直观（16px = 1.6rem，24px = 2.4rem），大幅降低心智负担。

缺点：

  • 非标准做法，可能让接手项目的开发者困惑。
  • 如果用户自定义了浏览器默认字号，62.5%会基于用户设置缩放，这其实是优点（尊重用户偏好）。
  • 某些第三方库可能默认假设 1rem = 16px，导致样式冲突。

建议：个人项目或小团队可用，大型项目建议保持默认16px基准或使用CSS变量统一管理。

vw 单位在移动端的兼容性和使用场景？

vw 单位在所有现代浏览器中均有良好支持（包括iOS Safari和Android Chrome），兼容性覆盖率达98%+。

常见使用场景：

  • 全屏宽度容器：width: 100vw
  • 响应式字体：font-size: calc(16px + 1vw)，字体随屏幕宽度缩放
  • 移动端适配：基于375设计稿，使用vw做弹性布局
  • 全屏滚动：结合 vh 实现整屏滚动效果

注意事项：移动端100vw可能包含滚动条宽度，建议使用width: 100%替代，或使用vw时预留余量。

如何在项目中统一管理CSS单位？有什么最佳实践？

推荐策略：

  • 字体大小：优先使用 rem，确保可访问性（尊重用户字号设置）。
  • 间距/margin/padding：使用 rem 或 px，保持一致性。
  • 边框/border：使用 px，边框通常不应随字号缩放。
  • 布局宽度：使用 %、vw、或 flex/grid，避免固定px宽度。
  • 媒体查询：使用 em（基于浏览器默认字号）或 rem，比px更具可访问性。

使用 CSS自定义属性（变量） 统一管理间距和字号体系，是现代化项目的最佳实践。

为什么我的rem值在手机上显示不一致？

可能的原因：

  • 不同设备的浏览器默认字号可能不同（虽然通常为16px，但用户可调整）。
  • 部分移动浏览器（如UC、QQ浏览器）可能有自己的默认样式覆盖。
  • 使用了固定viewport但未正确设置meta标签。
  • Android系统字体缩放设置影响了WebView中的根字号。

解决方案：确保HTML头部有正确的viewport meta标签，并显式设置html的font-size。可使用JS动态计算根字号（如flexible方案）适配不同屏幕。

vh、vmin、vmax 又是什么？和vw有什么关系？
  • vh：视口高度的1%。100vh = 整个视口高度。
  • vmin：视口宽度和高度中较小那个的1%。横屏时取高度，竖屏时取宽度。
  • vmax：视口宽度和高度中较大那个的1%。横屏时取宽度，竖屏时取高度。

它们与vw属于同一家族（viewport-relative units），在响应式设计和全屏布局中非常有用。

🔧 相关工具