UD5工具箱
像素单位换算器 - CSS单位术语表
理解各种 CSS 单位的含义和特性是正确使用换算器的基础。以下术语表对前端开发中与像素单位相关的专业术语进行详细解释，帮助你建立完整的知识体系。
PX（像素）
PX 是 Pixel（像素） 的缩写，是 CSS 中最基础、最常用的长度单位。一个 PX 代表屏幕上的一个逻辑像素点（在高分屏设备上，一个逻辑像素可能对应多个物理像素）。PX 是一个绝对单位，其实际显示大小不会随父元素或根元素的变化而改变。在设计稿中，所有尺寸通常都以 PX 为单位进行标注。PX 单位的优势在于精确可控，但缺点是在不同屏幕尺寸上缺乏弹性，因此不适合直接用于响应式布局。尽管如此，在桌面端开发和需要精确像素控制的场景中，PX 仍然是不可替代的。
EM
EM 是一个相对单位，其计算基准是当前元素的父元素的字体大小。如果父元素的 font-size 为 16px，则子元素中 1em = 16px。EM 单位的核心特性是可继承性——当元素嵌套多层时，EM 值会逐层累积。例如，在 font-size 为 16px 的父元素中，子元素设置 font-size: 1.5em（即 24px），如果该子元素内还有孙元素设置 font-size: 1.5em，则孙元素的字体大小为 36px（24px × 1.5），而非 24px。这种累积特性使得 EM 在某些场景下便于创建比例关系，但也可能导致意料之外的尺寸膨胀。EM 单位在组件化开发中较为常用，特别是在需要保持内部元素比例关系的 UI 组件库中。
REM
REM 是 Root EM（根EM） 的缩写，也是一个相对单位，但与 EM 不同的是，它的计算基准始终是根元素（html）的字体大小，不受父元素影响。在浏览器默认设置下，html 的 font-size 为 16px，因此 1rem = 16px。REM 的优势在于消除了 EM 的累积效应，无论嵌套多深，1rem 始终等于同一个值，使得尺寸计算更加可预测。REM 是当前响应式布局中最推荐使用的相对单位之一，广泛应用于字体大小、间距、边距等场景。许多 CSS 框架（如 Bootstrap、Tailwind CSS）都大量使用 REM 作为默认单位。
VW（视口宽度）
VW 是 Viewport Width（视口宽度） 的缩写，1vw 等于视口宽度的 1%。例如，在 1920px 宽的屏幕上，1vw = 19.2px；在 375px 宽的屏幕上，1vw = 3.75px。VW 单位的最大特点是完全基于视口尺寸，不依赖字体大小设置，因此非常适合实现纯视口级别的响应式布局。VW 常用于全屏背景、横向铺满的元素以及需要严格按比例缩放的场景。需要注意的是，VW 在极小或极大屏幕上可能导致元素过小或过大，通常建议配合 min() 和 max() CSS 函数使用以设置合理的上下限。
VH（视口高度）
VH 是 Viewport Height（视口高度） 的缩写，1vh 等于视口高度的 1%。与 VW 类似，VH 也是基于视口尺寸的相对单位，但方向为垂直方向。VH 常用于全屏布局、英雄区域（Hero Section）等需要占满视口高度的场景。在移动端浏览器中，VH 的计算可能受到地址栏显示/隐藏的影响，导致页面加载时高度跳动，这是使用 VH 时需要特别注意的问题。iOS Safari 和 Android Chrome 在处理 VH 时的行为也存在差异，需要通过测试验证。
根元素（Root Element）
根元素指的是 HTML 文档中的 <html> 标签，它是整个文档结构的最顶层元素。在 CSS 中，根元素的字体大小是 REM 单位的计算基准。通过设置 html { font-size: 16px; } 可以显式定义根字体大小。许多 CSS 重置样式表（Reset / Normalize）和前端框架（如 Tailwind CSS）都提供了一套根字体大小的配置方案。根元素的字体大小设置会影响整个页面中所有使用 REM 单位的元素，因此修改根字体需要谨慎评估全局影响。
响应式设计（Responsive Design）
响应式设计是一种网页设计方法论，旨在使页面能够在不同尺寸的设备上自动适配并提供良好的用户体验。响应式设计的核心技术包括媒体查询（Media Query）、弹性布局（Flexbox/Grid）以及相对单位（REM/EM/VW）的使用。像素单位换算器正是响应式设计工作流中的辅助工具，帮助开发者在设计稿的 PX 标注与代码中的相对单位之间建立桥梁。一个成熟的响应式方案通常会根据断点动态调整根字体大小，此时使用本工具可以快速验证不同断点下的尺寸转换结果。
视口（Viewport）
视口是指浏览器中用于显示网页内容的可见区域。在桌面端，视口通常等于浏览器窗口的内部尺寸；在移动端，视口可能分为布局视口（Layout Viewport）和视觉视口（Visual Viewport），两者的尺寸可能不同。理解视口的概念对于正确使用 VW/VH 单位至关重要。通过 <meta name="viewport" width=device-width"> 标签可以控制移动端视口的行为，确保布局视口与设备宽度一致。视口尺寸会随浏览器窗口调整、设备旋转、地址栏收缩等因素动态变化。
DPR（设备像素比）
DPR（Device Pixel Ratio）是设备物理像素与逻辑像素（CSS像素）的比值。例如，Retina 屏幕的 DPR 通常为 2 或 3，意味着一个 CSS 像素对应 4 或 9 个物理像素。DPR 影响的是图像清晰度和渲染细节，但不影响 CSS 单位的计算逻辑。在理解 PX 单位时，需要区分逻辑像素和物理像素的概念——CSS 中的 1px 始终指的是逻辑像素。因此，在 Retina 屏幕上，1px 的边框实际上是由 2×2 或 3×3 的物理像素渲染的，这也是为什么 1px 细线在 Retina 屏上看起来比预期更粗的原因。
字体大小继承
CSS 中的 font-size 属性具有继承特性：子元素如果没有显式设置 font-size，会继承父元素的 font-size 值。这一机制直接影响 EM 单位的计算——当父元素的 font-size 通过继承获得时，子元素的 1em 将基于该继承值进行计算。理解字体大小继承机制有助于正确使用 EM 单位，避免嵌套层级导致的尺寸意外放大。在使用本工具进行 EM 换算时，确保"父字体大小"基准值与实际项目中的父元素 font-size 一致，是获得准确结果的关键。