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

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

以下是我认为是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元素？最佳实践是什么？

虽然我有点同意c_kick关于使用

em

的评论，但真正响应性设计的一部分是允许用户设置发挥作用。这意味着让浏览器默认值保持为默认值。毕竟，你不知道浏览你网站的人是否几乎失明，是否因此需要大文本。因此，在

主体

上设置默认的

px

将使这种类型的“响应”无效，我相信这部分是您想要的

现在，如果你不在乎这一点，c_kick在

body

基础上设置

px

的解决方案是有效的（也是最简单的）

如果您希望保持用户的响应能力，但要让它以图形方式良好工作，那么您需要尝试做以下两件事中的一件（我不确定第二件事是否可以轻松实现，这只是一个与#1相反的想法，我确信它可以实现）：

设置并允许图像与字体大小成比例缩放（因此基于图像的缩放，或者让文本大小驱动图像缩放到的容器高度），或者

将这些图像（但不是文本框）周围的

边距

或

填充

设置为

em

大小，以便图像周围的“间隙”与文本的缩放方式成一定比例

---

我发现在pt中指定base

font size

，在em中指定all其他大小非常有用

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

html * {
    font-size: 12pt;
}

我肯定知道

字体大小为1em的文本中的每个字母都将占据

12pt=12*（1/72英寸）=宽度为12*0.35毫米=4.2毫米

无论分辨率如何-无论是800x600、1024x768还是1920x1200

这大大简化了站点的设计，因为如果我为按钮指定
宽度：10em
，我肯定知道该按钮的尺寸将12pt*10=4.2mm*10=4.2cm

此外，在分辨率为1920x1200的15“显示器上设计的站点在分辨率为1024x768的15“显示器上看起来几乎相同，这非常便于设计

因此，目前我只关心实际（物理）显示大小和纵横比，它们的变化不像分辨率那么大，而且更具可预测性。
由于“em”值基于固定的字体大小，例如已知的字体大小，因此最佳做法是将主体设置为px值。现在，基本字体值已经在em中定义，那么浏览器将在哪里设置该大小？浏览器默认值？我不知道，但如果你将其设置为15px（1em等于15px），你将对基本大小有更多的控制，因为你将其设置为一个已知的值，而不是理所当然地认为默认大小。此链接有更多信息：@c_kick，如果你以像素为单位设置
body
字体大小，那么使用
em
最重要的一点就不复存在了。这是我最初的想法，可能是我所采用的方法——但朱卡的观点就是我为什么回避它。我想我会做一些iPad测试。谢谢斯科特。你的建议#1也许是我认为最好的做法-但由于博客是在Wordpress中建立的，我已经允许对特色图像缩略图大小和块大小进行大量定制和不同的变量。。。这是非常动态的，有这么多不同的情况。根据默认浏览器文本大小合并图像缩放，我认为，在复杂性方面，这是骆驼背上的稻草。但我可能错了，作为一名建筑师，我应该接受这种东西。
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% */ 
}