7

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

4

3 回答 3

7

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

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

如果您希望保持该用户的响应能力，但让它在图形上运行良好，那么您需要尝试做两件事中的一件（我不确定第二件是否可以很容易地工作，这只是一个被抛弃的想法与#1相反，我确信它可以工作）：

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

font-size我发现在pt中指定 base并在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"显示器上设计的站点在分辨率为1024x768的15"显示器上看起来几乎相同- 这对于设计来说非常方便。

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

于 2014-03-12T16:41:34.857 回答
0 
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% */ 
}
于 2014-08-03T23:07:38.453 回答