Web、UI与CSS

16px 是多少 rem？基准字号会怎样影响结果？

使用工具

设计写 24px，代码写 1.5rem，根字体 16px 时两者相同，根字体 20px 时后者却是 30px。转换不是换后缀，而是明确长度参照。逐项改变参照，才能理解数值。

输入 24，px 转 rem，根字号 16px，得到 1.5rem；只改根字号为 20px，得到 1.2rem。这是在保留 24px 时改变 rem 值。若保留 1.5rem，则长度变为 30px，先明确固定哪一项。

换算取决于参照

24px / 16px = 1.5rem
24px / 20px = 1.2rem
1.5rem × 20px = 30px

16px 是示例而非普遍保证。应检查根元素计算后的 font-size，以及浏览器和 CSS 设置。先确认实际基准，再决定是否都除以十六，可能就能找到整页尺寸偏大或偏小的原因。

em 与 rem 不同，依赖元素字体上下文；用于 font-size 本身时参照父级，嵌套倍率会累积：16×1.2=19.2，再乘 1.2=23.04px。不是 rem 总更好，而是决定组件按局部缩放还是统一跟随根元素。

当前普通界面以根字号设置作为 em 参照，不会自动读取页面不同父级或元素字号。诊断嵌套 em 时应在开发者工具查看计算值，再单独整理倍率，不能把全页 em 都按同一个基准理解。

视口宽 1440px 时 10vw=144px，375px 时为 37.5px，随宽度比例变化。高度 900px 时 10vh=90px，即使用在横向属性也仍参照高度，需分清想跟随哪一维。

这里的视口是输入尺寸，不是完整设备模拟。浏览器界面、滚动条和缩放需实测，物理解像度不自动等于 CSS 视口。移动端高度布局要测试浏览器栏显隐；工具仅支持 px、rem、em、vw、vh，不把 svh/dvh 自动当成相同单位。

把卡片宽度转 rem 不会消除 gap、padding、边框和侧栏。先把视口三等分再加间距可能溢出。统一单位后可用 Flexbox/Grid 试排，并检查实际父容器宽度，不能把它等同于视口。

流动字号可能让窄屏正文过小。能换算不等于易读，应在设计中决定合理上下限，并允许换行而非强塞一行。工具只核对指定条件下的长度，不生成完整响应式设计。

应写根字号 16px 时 24px=1.5rem，而不只写换算。vw 附视口宽度，em 附字体参照，便于别人复现条件。分享前查看结果中的假设字段，把单位背后的基准写明。

实现后还要测试放大文字，正确算术仍可能让固定高度按钮溢出。用长翻译、两行标题、放大正文查看留白和操作区域。发现太小时，不只改数字，也检查参照。

1440px 视口的 10vw 是 144px，但扣侧栏余白后卡片空间更小。vw 不是父元素的百分之十。别的布局中过大可能是参照基准选择，不是换算错。% 的参照还依属性而定，不能同数字替换 vw 就称等价。

rem 要查实际根字号。24px=1.5rem 假定根 16px，根 20px 时是 30px，这是相对尺寸发挥作用。迁移设计值应记录基准，并在实际控件测文字放大；固定高度可能截断正确缩放的文字。

移动端浏览器栏和虚拟键盘会改变可见空间。工具只使用输入尺寸，不是设备布局模拟器，也不模拟未支持的动态视口单位。先用换算选候选，再在实际窄屏和放大状态测试。