UD5工具箱
EM（相对字体单位）
EM是CSS中的相对长度单位，其值相对于当前元素的父元素的字体大小（font-size）来计算。在EM与PX转换器中，EM是核心换算对象之一。1EM等于父元素的font-size值，例如父元素字号为16px时，1em = 16px。EM单位具有继承性和级联效应：当元素嵌套时，EM值会逐级累积计算。例如，在font-size为16px的父元素内，子元素设置font-size: 1.5em（即24px），如果子元素内还有孙元素设置font-size: 1em，那么孙元素的实际字号是24px（继承自子元素的计算值），而非16px。这种特性使得EM在组件化开发中非常灵活，但也需要开发者格外注意嵌套层级对最终效果的影响。
PX（像素单位）
PX是CSS中的绝对长度单位，代表一个像素（pixel）。它是Web开发中最基础、最直观的长度单位，几乎所有浏览器的默认字号都是以PX为基准定义的。在EM与PX转换器中，PX是另一个核心换算对象。PX的优势在于精确可控——设置font-size: 16px就是精确的16像素，不受任何父元素或根元素的影响。但PX的缺点在于缺乏灵活性，在不同屏幕尺寸和用户字体偏好设置下无法自动适配。因此，现代CSS最佳实践推荐在字体大小、间距等与可读性相关的属性上使用相对单位（EM或REM），而在边框粗细、阴影偏移等需要精确像素控制的场景中使用PX。
REM（根EM单位）
REM（Root EM）是CSS中的相对长度单位，与EM类似但有一个关键区别：REM始终相对于根元素（html标签）的字体大小计算，而不是相对于直接父元素。这意味着无论嵌套层级多深，REM的计算基准始终不变——只要根元素字号为16px，1rem就永远等于16px。REM避免了EM的级联累积效应，更适合用于全局一致的间距和字体控制。在EM与PX转换器中，理解EM和REM的区别对于正确选择单位至关重要：当你需要组件内部的相对缩放时，使用EM；当你需要全文档一致的基准值时，使用REM。
font-size（字体大小属性）
font-size是CSS中用于设置元素字体大小的核心属性。它是EM与PX转换器存在的基础——工具的所有换算都是围绕font-size的值展开的。font-size可以使用多种单位来定义，包括PX、EM、REM、百分比（%）、vw/vh等。当使用EM作为单位时，font-size的值是相对于父元素的font-size计算的；当使用PX时，值是绝对的。浏览器默认的font-size通常为16px，这是用户在未进行任何自定义设置时看到的默认文字大小。理解font-size属性的工作原理，是正确使用EM与PX转换器的前提。
根元素字号（Root Font Size）
根元素字号是指HTML文档中html标签的font-size值，它是所有REM计算的基准，也是浏览器默认字号的体现。几乎所有主流浏览器（Chrome、Firefox、Safari、Edge）的默认根字号都是16px。用户可以在浏览器设置中修改这个默认值，这也是使用相对单位（EM/REM）而非绝对单位（PX）的重要原因之一——尊重用户的字体偏好设置，提升无障碍访问体验。在EM与PX转换器中，父元素字号的默认值16px正是基于浏览器默认根字号的设定。
级联效应（Cascade Effect）
级联效应是指EM单位在嵌套元素中逐层累积计算的特性。例如，父元素font-size: 16px，子元素font-size: 1.5em（= 24px），孙元素font-size: 1.2em（= 28.8px，基于24px计算而非16px）。这种特性使得EM值在不同嵌套层级中可能产生意想不到的结果，也是EM与REM之间最重要的区别之一。在使用EM与PX转换器时，开发者需要意识到这种效应，确保在正确的父元素字号上下文中进行换算。
响应式设计（Responsive Design）
响应式设计是一种Web设计方法论，旨在使网页能够在不同设备和屏幕尺寸上提供良好的用户体验。EM单位是实现响应式设计的重要工具之一——通过设置相对单位的font-size，可以实现整体布局的弹性缩放。EM与PX转换器在响应式设计工作流中扮演着辅助角色，帮助开发者快速将设计稿中的PX值转换为EM值，确保响应式布局的准确性。工具本身的响应式布局也体现了这一设计理念。
无障碍访问（Accessibility）
无障碍访问是指确保残障人士（如视力障碍者）能够正常使用Web内容的设计原则和实践。在字体大小方面，无障碍访问要求使用相对单位（EM/REM）而非绝对单位（PX），以便用户可以通过浏览器设置放大文字而不破坏布局。EM与PX转换器通过帮助开发者正确使用EM单位，间接推动了Web无障碍标准的普及和实施。WCAG（Web内容无障碍指南）建议正文内容的字号至少为16px（1rem），这也是工具默认父元素字号设为16px的原因之一。
浏览器默认字号（Browser Default Font Size）
浏览器默认字号是指用户未进行任何自定义设置时，浏览器用于渲染网页文字的基础字号。主流浏览器的默认值均为16px。这个值是EM/REM计算的隐含基准，也是理解CSS单位体系的起点。当用户在浏览器设置中修改默认字号时，使用PX定义的文字大小不会变化，而使用EM/REM定义的文字会自动按比例缩放——这就是相对单位的核心优势。EM与PX转换器的父元素字号默认值16px正是基于这一行业标准。
DPI（每英寸像素数）
DPI（Dots Per Inch）或PPI（Pixels Per Inch）描述的是屏幕的像素密度。高DPI屏幕（如Retina显示屏）在相同的物理尺寸下拥有更多的像素点，使得文字和图像看起来更加清晰锐利。在高DPI屏幕上，CSS的1PX可能对应2个或更多物理像素。EM与PX转换器在计算时基于CSS像素（逻辑像素），而非物理像素，因此无论屏幕DPI如何，换算结果都是一致的。理解DPI的概念有助于开发者认识到，使用相对单位比使用绝对像素单位更能适应不同设备的显示特性。
WCAG（Web内容无障碍指南）
WCAG（Web Content Accessibility Guidelines）是由W3C制定的Web内容无障碍标准，为Web可访问性提供了详细的技术规范和最佳实践。在字体大小方面，WCAG建议使用相对单位来定义font-size，以便用户可以根据自身需求调整文字大小。WCAG 2.1的1.4.4（调整文本）要求文字在放大到200%时不丢失内容或功能。使用EM单位（而非PX）是满足这一要求的有效手段之一。EM与PX转换器帮助开发者在保持设计一致性的同时，遵循WCAG的无障碍标准。