CSS：如何为与设备可访问性设置匹配的移动设备设置“默认”字体大小？

Question

如何在 CSS 中为移动视口设置始终与移动设备默认系统字体大小匹配的字体大小（包括用户在设备系统设置中定义的自定义可访问缩放因子）？

假设已经有一个属性定义的移动媒体查询，例如@media (max-width: 600px)（为简洁起见）和一个元定义，例如<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">.

我的期望是设置类似

p {font-size: 100%}

会起作用，但这会导致不同设备上的字体大小不匹配，即根据设备像素密度和屏幕大小，它不会以与“常规”字体大小（包括可访问性设置）相同的大小呈现。

也试过了

p {font-size: medium}

但显然这会导致忽略设备的可访问性设置的大小。

Answer 1

有一个称为rem 的单位，1rem 等于html {} 中定义的高度。

html {
    font-size: 20px;
}

所以用户可以设置他对默认 HTML 字体大小的偏好，您不要覆盖它们，只需使用 1rem 将默认字体大小设置为某个值。

p {
    font-size: 1rem;
}

更多关于rem：https://www.w3.org/Style/Examples/007/units.en.html