Question

我尝试设计尽可能响应网站（除非为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元素？什么是最佳做法？

Answer 1

虽然我对c_kick关于使用em的评论有所了解，但真正响应式设计的一部分是允许用户设置发挥作用。这意味着让浏览器默认保留为默认值。毕竟，您不知道查看您网站的人是否几乎失明并且因此需要大文本尺寸。因此，在px上设置默认body将使这种“响应性”无效，我认为这部分是您的意图。

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

如果你希望保持用户的响应能力，但让它以图形方式运行良好，那么你需要做两件事之一（我不确定第二件事可以很容易地工作，它只是一个与＃1形成鲜明对比的想法，我确信它可以起作用）：

设置并允许图像与字体大小成比例缩放（因此基于em缩放图像，或者使文本大小驱动图像随后缩放的容器高度），或者。 ..
将这些图片（但不是文本框）周围的margin或padding设置为em尺寸，以便图片周围的“间隙”与图像的比例成比例缩放文字可能正在缩放。

Answer 2

我发现在 pt 中指定基本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 。

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

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

Answer 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% */ 
}

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

3 个答案: