CSS：基本字体大小（在浏览器中设置）和响应式设计
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14238799/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Base font size (set in browser) and responsive design
提问by jessica_b
I have tried to design as responsive of a website as possible (barring having set up special stylesheets for iPhones). To do so, I have set all of my font-sizes to "em". Our website just went live from test development, and one of my coworkers sent me a screenshot from his home computer, where the base font size of his Firefox has been set to 24pt. ([See screenshot here.]) Such a significantly larger base font-size (imho) is not something I had account for in the design. I know that it isn't good practice to override user defaults, but where this is a primarily graphic-based experience (especially on the front page), and the text needs to remain contained within the specified boxes - as you can see, the larger font-size breaks the design.
我试图设计尽可能响应式的网站（除非为 iPhone 设置了特殊的样式表）。为此，我已将所有字体大小设置为“em”。我们的网站刚刚从测试开发中上线，我的一位同事给我发了一张他家里电脑的截图，他的 Firefox 的基本字体大小设置为 24pt。（[见这里的截图。]）这么大的基本字体大小（恕我直言）不是我在设计中考虑到的。我知道覆盖用户默认值不是一个好习惯，但在这主要是基于图形的体验（尤其是在首页上），并且文本需要保留在指定的框中 - 正如您所看到的，较大的字体大小破坏了设计。
Here are what I deem to be the significant extracts from the css:
以下是我认为从 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;
}
You can visit it live at www.loeuf.com.
您可以在 www.loeuf.com 上实时访问它。
What are your suggestions? Override the body font-size with a pixel value, or just the h2 elements that are breaking the design? What's the best practice?
你有什么建议？使用像素值覆盖正文字体大小，还是仅使用破坏设计的 h2 元素？最佳做法是什么？
采纳答案by ScottS
While I agree somewhat with c_kick's comments on the use of em, part of a truly responsive design is to allow the user settings to come into play. That means letting the browser default remain as the default. After all, you don't know if the person viewing your site is nearly blind and in need of large text sizes because of that. So setting a default pxon the bodyis going to void that type of "responsiveness," which I believe is partly what you intended.
虽然我有点同意 c_kick 关于使用 的评论，但em真正响应式设计的一部分是允许用户设置发挥作用。这意味着让浏览器默认保留为默认值。毕竟，您不知道查看您网站的人是否几乎失明并因此需要大字体。因此，设置默认px的body是要作废该类型的“响应”，我相信部分是你的原意。
Now, if you don't care about that, c_kick's solution of setting a pxbase on the bodyis valid (and the easiest).
现在，如果您不关心这一点，c_kick 设置px基础的解决方案body是有效的（也是最简单的）。
If you desire to keep that user responsiveness, but have it work well graphically, then you need to play around with doing one of two things (I'm not certain the second could be easily made to work, it is just an idea thrown out in contrast to #1, which I'm sure could be made to work):
如果您希望保持该用户响应能力，但使其以图形方式运行良好，那么您需要尝试做两件事之一（我不确定第二件事是否可以轻松实现，这只是一个想法与 #1 相比，我确信它可以工作）：
- Either set up and allow the images to scale in proportion to the font size (so
embased scaling on the images, or having the text size driving the container height to which the image then scales), or... - Set up the
marginorpaddingaround those images (but not the text boxes) to anemsizing so that the "gap" around the images scales in some proportion to how the text might be scaling.
- 设置并允许图像与字体大小成比例
em缩放（因此基于图像的缩放，或者让文本大小驱动图像缩放到的容器高度），或者... - 将这些图像（但不是文本框）的
margin或padding周围设置为一个em大小，以便图像周围的“间隙”按文本可能的缩放比例按一定比例缩放。
回答by Yuriy Nakonechnyy
I found totally useful to specify base font-sizein ptand allother sizes in em.
我发现font-size在pt 中指定 base和在em 中指定所有其他大小非常有用。
So, for example, specifying following setting:
因此，例如，指定以下设置：
html * {
font-size: 12pt;
}
I definitely know that each letter of text with font-size: 1emwill occupy
我肯定知道每一个带有文字的字母font-size: 1em都会占据
12pt = 12 * (1/72 inch) = 12 * 0.35 mm = 4.2 mmin width
12pt = 12 * (1/72 英寸) = 12 * 0.35 毫米 = 4.2 毫米宽
no matter the resolution - be it 800x600, 1024x768or 1920x1200.
无论分辨率如何 - 无论是800x600、1024x768还是1920x1200。
It significantly simplified designing of site because if I specify width: 10emfor e.g. button I definitely know that this button will have 12pt * 10 = 4.2mm * 10 = 4.2 cmin size.
它显着简化了网站的设计，因为如果我指定width: 10em例如按钮，我肯定知道这个按钮的大小将是12pt * 10 = 4.2mm * 10 = 4.2 cm。
Also, site designed on 15"monitor with resolution 1920x1200looks almostthe same on 15"monitor with resolution 1024x768- which is very convenient for designing.
此外，在分辨率为1920x1200 的15"显示器上设计的站点在分辨率为1024x768 的15"显示器上看起来几乎相同- 这非常便于设计。
So currently I only bother for actual (physical) display sizesand aspect ratioswhich doesn't vary as greatly as resolutions and are far more predictable.
所以目前我只关心实际（物理）显示尺寸和纵横比，它们不像分辨率那么大，而且更容易预测。
回答by Yuriy Nakonechnyy
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% */
}
