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

问题描述

我在SO看到这个问题：

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

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

这些手机有最佳做法吗？

解决方案

问题中的字体大小是每个标题应该比较的比例的示例

因此，为了回应您的问题，这是一个最佳实践对于手机？ - 说iphone屏幕尺寸？，是的可能是 - 但你可能会发现有人说是最佳实践不适合你的布局。

但是，为了帮助您获得正确的轨道，本文关于构建响应式布局提供了一个很好的例子，说明如何计算关系中像素的基础 font-size

<$>

<$>

p $ p> @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;
}
}


I have seen this question on SO:

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

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

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

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

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