CSS：基本字体大小（在浏览器中设置）和响应式设计答案

【问题标题】：CSS: Base font size (set in browser) and responsive designCSS：基本字体大小（在浏览器中设置）和响应式设计
【发布时间】：2012-12-23 17:04:43
【问题描述】：

我试图设计尽可能响应网站的响应（除非为 iPhone 设置了特殊的样式表）。为此，我已将所有字体大小设置为“em”。我们的网站刚刚从测试开发中上线，我的一位同事给我发了一张他家用电脑的屏幕截图，他的 Firefox 的基本字体大小已设置为 24pt。（[参见此处的屏幕截图。]）如此大的基本字体大小（恕我直言）不是我在设计中考虑的。我知道覆盖用户默认值不是一个好习惯，但这是一种主要基于图形的体验（尤其是在首页上），并且文本需要保留在指定的框中 - 如您所见，较大的字体大小会破坏设计。

以下是我认为从 css 中提取的重要内容：

body {
    background: white;
    font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
    font-size: 1em;
    color: #858585;
}

.item.news.priority h2 {
    font-size: 1.25em;
}
.item.news h2 {
    font-size: 0.9em;
}

您可以在 www.loeuf.com 上实时访问它。

你有什么建议？用像素值覆盖正文字体大小，或者只是破坏设计的 h2 元素？最佳做法是什么？

【问题讨论】：

因为 'em' 值基于固定值 - 例如已知 - 字体大小，最佳做法是将正文设置为 px 值。现在，基本字体值已经在 em 中定义了，那么浏览器会在哪里确定这个大小呢？浏览器默认？我不知道，但是如果您将其设置为 15px（之后 1 em 将等于 15px），您将可以更好地控制基本尺寸，因为您将其设置为已知值，而不是将默认尺寸视为理所当然。
此链接包含更多信息：alistapart.com/articles/howtosizetextincss
@c_kick，如果你以像素为单位设置body字体大小，使用em最重要的一点就丢失了。
这是我最初的想法，可能也是我采用的方法 - 但 Jukka 的观点是我回避它的原因。我想我会做一些 iPad 测试。

标签： css font-size

【解决方案1】：

虽然我在一定程度上同意 c_kick 的 cmets 对 em 的使用，但真正响应式设计的一部分是允许用户设置发挥作用。这意味着让浏览器默认保持默认。毕竟，您不知道查看您网站的人是否几乎是盲人并且因此需要大文本。因此，在body 上设置默认的px 将使这种类型的“响应性”无效，我相信这部分是您想要的。

现在，如果您不关心这一点，c_kick 的基于body 设置px 的解决方案是有效的（也是最简单的）。

如果您希望保持用户的响应能力，但要让它在图形上运行良好，那么您需要尝试做两件事中的一件（我不确定第二件是否可以轻松工作，这只是一个与＃1相比，我确信可以使想法发挥作用）：

要么设置并允许图像与字体大小成比例缩放（因此em 基于图像缩放，或者让文本大小驱动容器高度，然后图像缩放到），或者...
将这些图像（但不是文本框）周围的margin 或padding 设置为em 大小，以便图像周围的“间隙”与文本的缩放方式成一定比例。

【讨论】：

谢谢斯科特。您的建议 #1 是我认为最好的做法 - 但由于博客是在 Wordpress 中设置的，并且我已经允许对特色图像缩略图大小和块大小进行大量自定义和不同变量.. . 这是非常动态的，有很多不同的案例。我认为，结合基于默认浏览器文本大小的图像缩放将成为压倒骆驼的复杂性的最后一根稻草。不过我可能错了，作为一名建筑师，我应该接受这种事情。

【解决方案2】：

我发现在 pt 和 all 中指定基本 font-size 和 em 中的其他尺寸非常有用。

因此，例如，指定以下设置：

html * {
    font-size: 12pt;
}

我肯定知道每个带有font-size: 1em的文字都会占满

12pt = 12 * (1/72 英寸) = 12 * 0.35 mm = 4.2 mm 宽度

无论分辨率如何 - 800x600、1024x768 或 1920x1200。

它显着简化了网站的设计，因为如果我指定 width: 10em 为例如按钮我肯定知道这个按钮的尺寸是 12pt * 10 = 4.2mm * 10 = 4.2 cm。

此外，在分辨率为 1920x1200 的 15" 显示器上设计的网站在 上看起来几乎相同15" 显示器，分辨率1024x768 - 非常方便设计。

所以目前我只关心实际（物理）显示尺寸和纵横比，它们不会像分辨率那样变化很大，而且更容易预测。

【讨论】：

【解决方案3】：

body { font-size: 100%;}

@media all and (max-width: 800px) {
   body { font-size: 200%;}
}

If screen is less than 800 the size of font increase 200%

In your example:

body {
    background: white;
    font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
    font-size: 100%;
    color: #858585;
}

.item.news.priority h2 {
    font-size: 110%; /* +10% */ 
}
.item.news h2 {
    font-size: 90%;  /* -10% */ 
}

【讨论】：