移动设备的最佳实践字体大小

Posted 2023-02-22

【中文标题】移动设备的最佳实践字体大小

【英文标题】：best practice font size for mobile

【发布时间】：2012-02-28 18:53:40

【问题描述】：

我在 SO 上看到过这个问题：

What are the most common font-sizes for H1-H6 tags 这是 H 标签的推荐字体大小：

h1  font-size: 2em; 
h2  font-size: 1.5em; 
h3  font-size: 1.17em; 
h5  font-size: .83em; 
h6  font-size: .75em; 

是否有针对手机的“最佳做法”？ -说 iphone 屏幕尺寸？

【问题讨论】：

我能给出的唯一建议是，是的，ems 是要走的路，而不是另一个问题所暗示的像素。但这取决于。例如，如果 h1 中的文本很大（比如一个完整的句子），我觉得 2em 有点过于庞大，我会选择更小的尺寸。

嗯，你知道 em 是一个相对度量，对吧？所以没有基础的 1em 没有任何意义。

@FlorianRachor 不正确，抱歉。

【参考方案1】：

您问题中的字体大小是每个标题相互比较的比例示例，而不是它们本身的大小（以像素为单位）。

所以在回答您的问题“对于这些手机是否有'最佳实践'？-比如 iphone 屏幕尺寸？”，是的，可能有 - 但你可能会发现有人说什么是“最佳实践”不适用于您的布局。

但是，为了帮助您走上正轨，this article about building responsive layouts 提供了一个很好的示例，说明如何计算与设备屏幕尺寸相关的以像素为单位的基本 font-size。

该文章建议的屏幕分辨率的建议字体大小如下：

@media (min-width: 858px) 
    html 
        font-size: 12px;
    

 
@media (min-width: 780px) 
    html 
        font-size: 11px;
    

 
@media (min-width: 702px) 
    html 
        font-size: 10px;
    

 
@media (min-width: 624px) 
    html 
        font-size: 9px;
    

 
@media (max-width: 623px) 
    html 
        font-size: 8px;
    

【讨论】：

它说使用rem 而不是em。 em 继承自父级，而 rem 直接来自 html.. 可以在我制作的小提琴中看到 jsfiddle.net/5qb4x

我宁愿说低于 12px 已经很糟糕了。好吧，即使是 8px 也是可读的，但它不像 12px 或类似的那样容易阅读。用户应该看到文字大小，这将使他有机会阅读文字，而无需缩放或将手机靠近眼睛。 内容是客户在我们网站上寻找的内容，而不是带有小写字母的白色背景；）

媒体查询不错，可以根据实际媒体宽度设置自己的规则

应该是 624 而不是 724 像素。

【参考方案2】：

根据我对已接受答案的评论，通过声明小于12px 的字体大小可能会遇到很多潜在的陷阱。通过声明导致计算出的字体大小小于12px 的样式，如下所示：

html 
  font-size: 8px;

p 
  font-size: 1.4rem;

// Computed p size: 11px.

您会遇到浏览器问题，例如带有中文语言包的 Chrome，它会自动将在 12px 下计算的任何字体大小呈现为 12px。所以，以下是正确的：

h6 
    font-size: 12px;

p 
   font-size: 8px;

// Both render at 12px in Chrome with a Chinese language pack.   
// How unpleasant of a surprise.

我还认为，出于可访问性的原因，您通常不应使用小于 12 像素的尺寸。您可能可以为字幕等提供理由，但同样要准备好在某些浏览器设置下感到惊讶，并准备让您的祖母在尝试阅读您的内容时眯起眼睛。

我会选择这样的东西：

h1 
    font-size: 2.5rem;


h2 
    font-size: 2.25rem;


h3 
    font-size: 2rem;


h4 
    font-size: 1.75rem;


h5 
    font-size: 1.5rem;


h6 
    font-size: 1.25rem;


p 
    font-size: 1rem;


@media (max-width: 480px) 
    html 
        font-size: 12px;
    


@media (min-width: 480px) 
    html 
        font-size: 13px;
    


@media (min-width: 768px) 
    html 
        font-size: 14px;
    


@media (min-width: 992px) 
    html 
        font-size: 15px;
    


@media (min-width: 1200px) 
    html 
        font-size: 16px;
    

您会发现 tons of sites 必须关注可访问性使用相当大的字体大小，即使对于 p 元素也是如此。

附带说明，将margin-bottom 设置为等于font-size 通常也很有吸引力，即：

h1 
    font-size: 2.5rem;
    margin-bottom: 2.5rem;

祝你好运。

【讨论】：

我如何强制计算字体大小低于 12px 呢？如果我将它设置为 10 像素，我希望它是 10 像素而不是 12 像素。？

在某些浏览器中，您不能。我认为中文版 Chrome 这样做是因为中文文本

【参考方案3】：

对 em 来说，大小是相对于底数的。所以我想说你可以通过改变基础来保持字体大小。

示例：如果您的 base 为 16px，而 p 为 0.75em（即 12px），则您必须将 base 提高到大约 20px。在这种情况下，p 将等于大约 15px，这是我个人对手机的最低要求。

【讨论】：

但这与基本字体大小无关。如果是的话，我会说让它取决于屏幕宽度。你知道，使用@media 规则。这是关于标头与正常的比例，然后你不能比使用 em 做得更好。

抱歉，您不同意自己的观点。 “标头与正常比例” - 正常大小是多少？确切地说是基数，以 px 为单位，因为媒体由像素组成。如果你想使用em，你必须设置一个base（16px在大多数浏览器中是标准的）。

那你不明白这个问题。问题不在于最好的，比如说，体型是什么。这是关于标题的大小，相对于正常大小。并且 em 与您必须首先设置的某个未定义大小无关，它与父级（在本例中为主体）中的大小相关。如果您没有为正文设置大小，浏览器将使用其默认值。所以浏览器总是知道 em 有多大（以像素为单位），即使您不强制用户使用基本尺寸。

很抱歉，我一直觉得您不理解 em 的概念。你基本上写的和我一样，但一直告诉我我错了。如果您不设置大小，浏览器将使用 16px。如果 h1-h6 尺寸是屏幕上的最佳 p/h 比，那么它很可能是手机的最佳选择。您只需根据媒体调整底座。关于 em 的全部内容是相对于基数的大小。所以你改变的是基数而不是比率。

@FlorianRachor “如果您不设置大小，浏览器将使用 16 像素。”这不完全是事实。虽然许多浏览器的出厂默认值可能约为 16 像素，但用户可以将其更改为他们选择的大小。无论如何，我的回答是对你说的“没有基础的 1em 没有任何意义”，这没有意义。即使您没有在网页中指定任何内容，也始终存在“基本”大小，因此 em 在特定情况下始终是特定数量的像素。它与父级中的字体大小有关，而不是与必须显式设置才能具有值的某些“基本”大小有关。