Question

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

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

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

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

Answer 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.

我还认为，出于可访问性原因，您通常不应使用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;
    }
}

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

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

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

祝你好运。

Answer 3

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

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

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

3 个答案: