给定设计（1920 像素 x 1080 像素）的 html 字体大小基础是多少？答案

【问题标题】：What is the html font-size base for a design given (1920px x 1080px)?给定设计（1920 像素 x 1080 像素）的 html 字体大小基础是多少？
【发布时间】：2023-03-26 11:10:01
【问题描述】：

我有点困惑。如果我有一个给定的模型设计（1920x1080px），例如该段落的字体大小为 22px，h1 的值为 60px，那么要转换为 rem 的字体大小的基础应该是什么？

html {
   font-size: 18px;
}

html {
       font-size: 100%;
    }

或者我应该服用

   html {
     font-size: 62.5%
   }

【问题讨论】：

我会做 html { font-size: 62.5%; } 和 body { font-size: 2.2rem; }

标签： css responsive-design font-size

【解决方案1】：

如果你按照@HaoWu 的建议设置

html { font-size: 62.5%; }

那么在大多数情况下，您基本上将 rem 设置为 10px，因为大多数浏览器默认将 16px 作为基本字体大小。然后将 h1 设置为 60px 是一个简单的计算，因为它只有 6rem。

如果用户将浏览器基本大小设置为其他值，则偶尔会有例外情况。这是他们的选择，也许是因为他们希望网站自动显示更大的文本。这意味着您不能绝对依赖 1rem 为 10px。在大多数情况下，这应该没问题，因为一切都会正确成比例。

如果它对您的布局至关重要，并且通常在适当的响应式设计中它不会是，rem 具有确定的 px 值，那么您需要以 px 为单位定义 html 字体大小，但如果可以的话最好不要避免它。

【讨论】：

感谢您的回答。如果可以为 1920x1080px 模型取 62.5%，那么例如对于 768 和 992 之间的设备，您应该有一个字体大小：50%；可以吗？
我认为您需要确保大小不会变得无法读取，因此您需要进行某种测试以确保它不会下降太多。我不知道什么被认为是不可读的。希望有人能回答。
这里有一篇可读的文章 [link] css-tricks.com/accessible-font-sizing-explained 涉及 WCAG，可访问性指南。他们似乎建议您使用成比例的字体大小，但您不要让它们低于浏览器标准大小（通常为 16 像素）。我在其他地方读过 Apple 的建议，即按钮不应低于 44px 正方形。