Html 移动设备的最佳实践字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9174669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
best practice font size for mobile
提问by raklos
I have seen this question on SO:
我在 SO 上看到过这个问题：
What are the most common font-sizes for H1-H6 tagswith 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?
对于这些手机，是否有“最佳实践”？- 说 iphone 屏幕尺寸？
回答by My Head Hurts
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 layoutsprovides a good example of how to calculate the base font-sizein pixels in relation to device screen sizes.
但是，为了帮助您走上正轨，这篇关于构建响应式布局的文章提供了一个很好的示例，说明如何计算与font-size设备屏幕尺寸相关的像素基数。
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;
}
}
回答by nikk wong
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 12pxas 12px. So, the following is true:
你会遇到浏览器的问题，比如带有中文语言包的 Chrome，它会自动呈现在12pxas下计算的任何字体大小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.
我还认为，出于可访问性的原因，您通常不应使用 12 像素以下的尺寸。您可能可以为字幕等提供理由，但同样要准备好在某些浏览器设置下感到惊讶，并准备在您的祖母试图阅读您的内容时眯眼。
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 tonsofsitesthat have to focus on accessibility use rather large font sizes, even for pelements.
您会发现大量必须关注可访问性的网站使用相当大的字体大小，即使对于p元素也是如此。
As a side note, setting margin-bottomequal to the font-sizeusually also tends to be attractive, i.e.:
作为旁注，设置margin-bottom等于font-size通常也往往很有吸引力，即：
h1 {
font-size: 2.5rem;
margin-bottom: 2.5rem;
}
Good luck.
祝你好运。
回答by Florian Rachor
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.
em 的全部内容是，大小是相对于基数的。所以我会说你可以通过改变基数来保持字体大小。
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.
示例：如果您的 base 是 16px，而 p 是 0.75em（即 12px），您必须将 base 提高到大约 20px。在这种情况下，p 将等于大约 15px，这是我个人对手机要求的最小值。
