相对单位的应用：em, rem, vw, vh, pt, sp

通过CSS的**em、rem或视口单位（如vw、vh**）等相对单位，使得字体大小能够响应系统级的字体设置。

Untitled

1. 使用 em 单位

em 单位是相对于其直接或更近的父元素的字体大小。如果父元素的字体大小变了，使用 em 单位的元素的字体大小也会相应地改变。

body {
    font-size: 16px; /* 设置基本字体大小 */
}

h1 {
    font-size: 2em; /* 等于基本字体大小的2倍，即32px */
}

rem（root em）单位相对于根元素（html元素）的字体大小。这意味着你可以通过改变根元素的字体大小来调整整个页面的字体大小，这对于实现响应式设计特别有用。

html {
    font-size: 16px; /* 根元素字体大小 */
}

h1 {
    font-size: 2rem; /* 等于根元素字体大小的2倍，即32px */
}

窗口宽度单位（vw）和窗口高度单位（vh）分别基于窗口的宽度和高度。例如，1vw 等于窗口宽度的1%，而 1vh 等于窗口高度的1%。使用窗口单位可以使元素的字体大小根据窗口大小的变化而动态调整，非常适合制作完全响应式的设计。

h1 {
    font-size: 5vw; /* 字体大小为视口宽度的5% */
}

p {
    font-size: 2vh; /* 字体大小为视口高度的2% */
}

Android通过使用尺寸单位sp（scale-independent pixels）来支持不同的字体大小设置。最大字体大小同样是基于系统默认大小的一个比例，具体的最大值取决于设备的设置和可能的制造商定制。
在ios里，点（pt）在iOS开发中用作一个逻辑单位，以帮助适配不同的屏幕密度，点（pt）提供了一种与设备屏幕密度解耦的方式来指定尺寸和布局参数，从而在设计应用时保持一致性和清晰度。

全局样式和布局：推荐使用**rem**，因为它提供了一致性和易于维护的优点，尤其是在实现响应式设计时，比如说文本容器的宽度。比如说。元素的width/height/padding/margin用em的话是相对于该元素的font-size。
组件和元素级样式：**em**可以用于需要基于父元素字体大小进行缩放的情况，例如，元素的内部布局或文本内容。

简单概括就是：em相对于父元素，rem相对于根元素，字体通常来说用rem是会更加可控的。