当所有排版变体都是 `rem` 时,fontSize 主题设置的目的是什么?

What is the purpose of the fontSize theme setting when all typography variants are `rem`?

Material UI 版式设置 (https://mui.com/material-ui/customization/typography/) 的文档令人困惑,没有真正意义:

MUI uses rem units for the font size. The browser element default font size is 16px, but browsers have an option to change this value, so rem units allow us to accommodate the user's settings, resulting in a better accessibility support. Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can be vastly different in size and viewing distance.

To change the font-size of MUI you can provide a fontSize property. The default value is 14px.

那是哪一个?它使用 REM 还是使用字体大小作为排版变体的基础?如果您查看默认主题 (https://mui.com/material-ui/customization/default-theme/?expand-path=$.typography),所有变体都应该使用 rem——文档甚至讨论在 htmlFontSize.

中自定义此值

所以我真的很难理解 fontSize 主题设置的 use/purpose?

typography.fontSizetypography.htmlFontSize 值应以像素为单位,但这些像素值不会直接放在页面上。相反,material ui 代码将采用像素值并计算相应的 rem 值。 rem 值是放入 css class 的值,因此由浏览器呈现。通过使用 rems 作为最终值,用户的浏览器设置可以更改最终大小

他们用于此计算的方程显示 in the article:

computed = specification * (typography.fontSize / 14) * (html fontsize / typography.htmlFontSize)

示例 1:一切都设置为默认值,typography.fontSize 设置为 14typography.htmlFontSize 设置为 16,typography.h3.fontSize 设置为 "1.2rem".然后渲染 <Typography variant="h3">。在那种情况下,计算将是:

computed = 1.2rem * (14 / 14) * (16 / 16)

计算得出大小为 1.2rem,这就是将放入 css class.

中的内容

示例 2:您现在将 typography.fontSize 更改为 12,将 typography.htmlFontSize 更改为 18,将 typography.h3.fontSize 更改为 "1.5rem"。使用这些值,计算结果为:

computed = 1.5rem * (12 / 14) * (16 / 18)

这大约 1.143 rem

在实践中,如果您想将所有字体更改为更大或更小,请更改 typography.fontSize;每个变体都将基于此进行缩放。如果要将特定变体更改为更大而其余部分保持不变,请修改 typography.[variant].fontSize。我看不出您想要更改的原因 typography.htmlFontSize,但如果您需要,可以使用该旋钮。