移动设备的最佳实践字体大小 [英] best practice font size for mobile

问题描述

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

I have seen this question on SO:

最常见的字体有哪些-H1-H6 标签尺寸这是 H 标签的推荐字体大小:

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

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

是否有针对手机的最佳实践"?- 说 iphone 屏幕尺寸?

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

推荐答案

您问题中的字体大小是每个标题相互之间的比例的示例，而不是它们本身的大小(以像素为单位)).

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

因此，在回答您的问题时"是否有针对手机的最佳实践"?- 说 iphone 屏幕尺寸?"，是的，可能有 - 但你可能会发现有人说的是最佳实践"不适用于您的布局.

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.

然而，为了帮助您走上正轨，这篇关于构建响应式布局的文章 提供了一个很好的例子，说明如何计算与设备相关的基本字体大小(以像素为单位)屏幕尺寸.

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: 624px) {
    html {
        font-size: 9px;
    }
}
 
@media (max-width: 623px) {
    html {
        font-size: 8px;
    }
}

这篇关于移动设备的最佳实践字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！