移动设备的最佳练习字体大小

I have seen this question on SO:

我在SO上看过这个问题：

What are the most common font-sizes for H1-H6 tags with this being the recommended font sizes fo H tags:

H1-H6标签最常见的字体大小是什么，这是H标签推荐的字体大小：

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

Is there a 'best practice' for these for mobile phones? -say iphone screen size?

这些手机有“最佳实践”吗？ -ay iphone屏幕尺寸？

3 个解决方案

#1

The font sizes in your question are an example of what ratio each header should be in comparison to each other, rather than what size they should be themselves (in pixels).

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

So in response to your question "Is there a 'best practice' for these for mobile phones? - say iphone screen size?", yes there probably is - but you might find what someone says is "best practice" does not work for your layout.

因此，回答你的问题“这些手机有'最佳实践'吗？ - 说iphone屏幕大小？”，是的，可能有 - 但你可能会发现有人说“最佳做法”不适用于你的布局。

However, to help get you on the right track, this article about building responsive layouts provides a good example of how to calculate the base font-size in pixels in relation to device screen sizes.

但是，为了帮助您走上正轨，本文关于构建响应式布局提供了一个很好的示例，说明如何计算与设备屏幕大小相关的基本字体大小（以像素为单位）。

The suggested font-sizes for screen resolutions suggested from that article are as follows:

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

@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: 724px) {
    html {
        font-size: 9px;
    }
}

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

#2

Based on my comment to the accepted answer, there are a lot potential pitfalls that you may encounter by declaring font-sizes smaller than 12px. By declaring styles that lead to computed font-sizes of less than 12px, like so:

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

html {
  font-size: 8px;
}
p {
  font-size: 1.4rem;
}
// Computed p size: 11px.

You'll run into issues with browsers, like Chrome with a Chinese language pack that automatically renders any font sizes computed under 12px as 12px. So, the following is true:

您将遇到浏览器问题，例如带有中文语言包的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.

I would also argue that for accessibility reasons, you generally shouldn't use sizes under 12px. You might be able to make a case for captions and the like, but again--prepare to be surprised under some browser setups, and prepared to make your grandma squint when she's trying to read your content.

我还认为，出于可访问性原因，您通常不应使用12px以下的大小。您可能能够为字幕等提供案例，但是再次 - 准备在某些浏览器设置下感到惊讶，并准备在您尝试阅读您的内容时让您的奶奶眯眼。

I would instead, opt for something like this:

我宁愿选择这样的东西：

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

You'll find that tons of sites that have to focus on accessibility use rather large font sizes, even for p elements.

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

As a side note, setting margin-bottom equal to the font-size usually also tends to be attractive, i.e.:

作为旁注，设置margin-bottom等于font-size通常也很有吸引力，即：

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

Good luck.

祝你好运。

#3

The whole thing to em is, that the size is relative to the base. So I would say you could keep the font sizes by altering the base.

整个事情是，大小是相对于基数。所以我想说你可以通过改变基数来保持字体大小。

Example: If you base is 16px, and p is .75em (which is 12px) you would have to raise the base to about 20px. In this case p would then equal about 15px which is the minimum I personally require for mobile phones.

示例：如果您的基数是16px，而p是.75em（12px），则必须将基数提高到大约20px。在这种情况下，p将等于大约15px，这是我个人对手机所需的最小值。

#1