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

Question

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

36

我在stackoverflow上看到了这个问题：

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

对于移动手机（例如 iPhone 的屏幕大小），是否有“最佳实践”？

- raklos

我唯一能给出的建议是，是的，ems 是正确的选择，而不是像其他问题所建议的像素。但这取决于情况。例如，如果 h1 中的文本很大（比如整个句子），我觉得 2em 有点太压倒性了，我会选择一个较小的字号。 - Mr Lister

4

你知道em是相对度量单位吧？所以没有基准的1em是无意义的。 - Florian Rachor

@FlorianRachor 不对，抱歉。 - Mr Lister

3个回答

8

根据我对被接受答案的评论，声明小于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.

我认为出于无障碍性的考虑，一般不应使用小于12px的字体大小。你可能可以为标题等内容辩护，但同样要准备好在某些浏览器设置下感到惊讶，并且当你的祖母试图阅读你的内容时，要做好她眯着眼睛的准备。

相反，我建议选择像这样的字体大小：

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;
    }
}

你会发现，专注于无障碍性的许多网站通常使用相对较大的字体大小，甚至用于p元素。

另外，将margin-bottom设置为font-size通常也很吸引人，即：

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

祝你好运。

- nikk wong

如何强制计算出小于12px的字体大小？如果我将其设置为10px，则希望它是10px而不是12px。 - MrCalvin

在一些浏览器中，你可能无法这样做。我认为 Chrome 的中文版本之所以这样做，是因为小于 12 像素的中文文本完全无法辨认。对于其他版本的 Chrome，我不确定，但我认为可以肯定其他语言也可能有这个“最小尺寸”的设置。出于这个原因，以及为了普遍可访问性，将最小尺寸保持在 12 像素是个好主意。这不是一个坏主意。像谷歌这样的公司在可访问性方面进行了大量研究，并且很少使用小于 12 像素的字体大小。 - nikk wong

1

对我来说，整个问题在于大小是相对于基础大小而言的。因此，我认为您可以通过改变基础大小来保持字体大小。

例如：如果您的基础大小为16px，而p的大小为.75em（即12px），那么您需要将基础大小提高到约20px。在这种情况下，p的大小将达到约15px，这是我个人对移动电话所需的最小字体大小。

- Florian Rachor

1

但这不是关于基础字体大小的问题。如果是的话，我会建议它取决于屏幕宽度。你知道，用一个@media规则。这是关于标题和正文比例的问题，那么你最好使用ems单位。 - Mr Lister

抱歉，但您与自己的观点不一致。 "标题到正文比" - 那么什么是正常大小？准确地说，就是以像素为单位测量的基础大小，因为媒体由像素组成。如果您想使用em，则必须设置一个基础值（在大多数浏览器中，16px是标准值）。 - Florian Rachor

你没有理解问题。问题不是关于最佳的身体大小是什么，而是关于标题的大小相对于正常大小的比例。而且em并不是相对于某个未定义的大小来设置的，它是相对于父元素的大小（在这种情况下是body）来设置的。如果你没有为body设置大小，浏览器将使用其默认值。因此，即使您不强制用户设置基础大小，浏览器也始终知道一个em在像素中有多大。 - Mr Lister

1

很抱歉，但我感觉你不理解em的概念。你基本上写的和我一样，但还是告诉我我错了。如果你不设置大小，浏览器将使用16px。如果h1-h6大小在屏幕上的p/h比例最好，那么它很可能也是手机上最好的。你只需要根据媒体调整基础大小。关于em的整个概念是相对于基础大小的相对大小。所以你改变基础而不是比例。 - Florian Rachor

似乎这个问题正是关于你“最有可能”的部分。 - Jan Pöschko

1

如果您不设置大小，浏览器将使用16px。这并不完全准确。虽然许多浏览器可能具有大约16px的工厂默认值，但用户可以将其更改为所选大小。无论如何，我的回应是针对您说“没有基础的1em毫无意义”，这并不合理。即使在网页中没有指定任何内容，也始终存在一个“基础”大小，因此em始终是特定情况下特定像素数量。它相对于父级字体大小，而不是某些必须显式设置以具有值的“基础”大小。 - Mr Lister

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- My Head Hurts · Accepted Answer

你问题中的字体大小是各个标题应该相对于彼此的比例，而不是它们本身应该有多大（以像素为单位）。

因此，回答你的问题“这些在手机上有最佳实践吗？-比如iPhone屏幕尺寸？”是的，可能有最佳实践 - 但你可能会发现别人所说的“最佳实践”并不适用于你的布局。

然而，为了帮助你找到正确的方法，这篇关于构建响应式布局的文章提供了一个好的示例，介绍了如何计算基础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;
    }
}