使用 62.5% 作为 html 根来使用 rem 真的安全吗?这是否意味着 100% 的浏览器默认字体大小为 16p



我向一组提出了 62.5% 的可扩展性技巧(将 62.5% 作为字体大小放在根中,并在整个 css 中使用 rem 以便在用户更改默认浏览器字体大小时更容易扩展(,它们的参数是:

"浏览器可以设置任何它想要的字体大小,如果你想确定你使用的大小,你需要在CSS中指定一个大小">

"我也不认为你根本不需要使用 REM 来设置和使用你的样式中的特定大小,你可以说自定义属性 --unit:10px;然后重用 --unit 来调整其他内容的大小,并且不需要将其设置为 HTML 标签的字体大小即可执行此操作 不要在浏览器样式表可能包含什么的假设之上构建你的CSS,设置你知道你想要的东西,如果你知道你想要10px,设置10px">

"我发现REM几乎毫无用处,有些人不遗余力地使用各种神奇的公式和转换以及各种心算,而不仅仅是在脑海中设定他们正在思考的东西。 例如,我知道我希望这个标题是 24px,所以我最好将元素的字体大小设置为 10px,这样我就可以说 H1 是 2.4 倍,无论 HTML 标签的字体大小是多少! 而不是说"我知道我希望它是 24px,所以我把它设置为 24px"然后完成">

作为一个附带问题,在一些使用 rem 的文章中,他们在使用媒体查询时会更改正文中的字体大小,这会影响 rem?我以为只有字体大小会影响 rem?

如果可访问性对您的项目很重要(应该是(,那么按照您的建议,使用字体大小的相对方法是正确的选择。绝大多数浏览器使用 16px 显示大小的计算值作为默认值。

MDN是这样说字体大小的:

无法访问在 px 中定义字体大小,因为用户无法 在某些浏览器中更改字体大小。例如,用户 Vision 可能希望将字体大小设置为远大于所选大小 由网页设计师。如果您愿意,请避免将它们用于字体大小 创建包容性设计。

显示真实世界示例的一种方法是将浏览器对字体大小的首选项设置为更大的字体大小。请注意,px 设置的字体大小将不符合您的首选项(您可以缩放页面(。因此,用户每次都可以针对他们访问的每个选项卡缩放网页,但我们不应该强迫某人这样做。

62.5% 方法简化了开发人员查看 px 值与 em 或 rem 之间的关系 - 2.7rem = 27px 比 27/16 = 1.6875rem 更容易关联。还有其他方法,但我喜欢62.5%的选择。请参阅这篇 CSS 技巧文章,了解有关此主题的精彩文章:可访问的字体大小解释

最新更新