CSS 为什么 em font-size 在响应式网格上不调整大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12904233/
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
Why doesn't em font-size resize on responsive grid?
提问by Francesca
I've created a responsive grid and used em as the font-size to make the text resize, but I must not be fully understanding how em's work as there is no resizing of text.
我创建了一个响应式网格并使用 em 作为字体大小来调整文本大小，但我不能完全理解 em 是如何工作的，因为没有调整文本大小。
Live site: http://www.rubytuesdaycreative.co.uk/testsite/shop.html
直播网站：http: //www.rubytuesdaycreative.co.uk/testsite/shop.html
Following Ethan Marcottes book I've set the body font to font-size:100%and then made by text within the cpation on the page linked above as 2ems - so double the base size... Am I doing it wrong? It doesn't seem to change at all.
按照 Ethan Marcottes 的书，我将正文字体设置为font-size:100%，然后由上面链接的页面上的 cpation 中的文本制作为 2ems - 所以将基本尺寸加倍......我做错了吗？它似乎根本没有改变。
回答by bookcasey
I think what you are looking for is @mediaqueries. Emis not a magic-bullet unit that will resize based on the browser width. It is a relative unit.
我认为您正在寻找的是@media查询。Em不是会根据浏览器宽度调整大小的魔法子弹单位。它是一个相对单位。
If you want any CSS to change based on the browser width, use @mediaqueries.
如果您希望任何 CSS 根据浏览器宽度进行更改，请使用@media查询。
ems are useful in this case because you only have to change one value (body{font-size}) to scale all the rest of the page. Because they are relative, not because the the browser changed. You can use these techniques together.
ems 在这种情况下很有用，因为您只需更改一个值 ( body{font-size}) 即可缩放页面的所有其余部分。因为它们是相对的，而不是因为浏览器变了。您可以同时使用这些技术。
Here is a quick example. Resize the window.
这是一个快速示例。调整窗口大小。
body{font-size:100%;}
i{font-size: 2em;}
@media screen and (min-width: 500px) {
body{font-size: 150%;}
}
@media screen and (min-width: 700px) {
body{font-size: 200%;}
}
?
?
回答by Jukka K. Korpela
回答by MCMXCII
Although this is an old question, I've recently come up with a solution.
虽然这是一个老问题，但我最近想出了一个解决方案。
If you define all text within the body as a percentage and then resize the text within the body on document.ready and on window.resize, the text remains 100% responsive.
如果您将正文中的所有文本定义为百分比，然后在 document.ready 和 window.resize 上调整正文中的文本大小，则文本保持 100% 响应。
e.g.
例如
CSS
font-size: 100%;
JavaScript
function fontResize(){
var perc = parseInt($(window).width())/125;
$('body').css('font-size',perc);
}
JQuery
$(document).ready(function (){
fontResize();
});
$(window).resize(function () {
fontResize();
});
回答by Anthony Griggs
In recently researching this issue myself for responsive design... I came across this wonderful table: http://www.hubbers.com/index.php/converting-px-into-percentage-and-em-for-relative-css-font-sizes/
最近为了响应式设计而自己研究这个问题......我遇到了这个美妙的表格：http: //www.hubbers.com/index.php/converting-px-into-percentage-and-em-for-relative-css -字体大小/
It breaks down the conversions between: pixels, em's and percentages within the table but even better, it provides the simple formulas to convert these from one to another which was very helpful in my case as I was determining font-size dynamically
它分解了表格中的像素、em 和百分比之间的转换，但更好的是，它提供了将这些从一个转换为另一个的简单公式，这对我来说非常有帮助，因为我正在动态确定字体大小
I was similarly thinking that making font sizes percentages would force them to re-size like other elements when the window resizes... but that does not work (although it should in my opinion). In the end I ended up using media queries as stated by Bookcasey along with the formula mentioned above to convert the percentages back to em's.
我同样认为，当窗口调整大小时，使字体大小百分比会迫使它们像其他元素一样重新调整大小……但这不起作用（尽管我认为应该这样做）。最后，我最终使用 Bookcasey 所述的媒体查询以及上面提到的公式将百分比转换回 em。
回答by Valentina
I think that table is quite clear and shows well the reason why fonts can't scale with window resizing. The reason is that ems, percentage and even rems are relative to the browser default font (that is usually 16px) not to the measurement of the browser window. So if you write "font-size: 100%;" is like writing "font-size: 16px;" and not "font-size: 100% of the window ize". If you write "font-size: 200%;" is like "font-size: 32px;" etc...
我认为该表非常清楚，并且很好地说明了字体无法随着窗口大小调整而缩放的原因。原因是 ems、百分比甚至 rems 是相对于浏览器默认字体（通常是 16px）而不是浏览器窗口的度量。所以如果你写“font-size: 100%;” 就像写“font-size: 16px;” 而不是“字体大小：窗口大小的 100%”。如果你写“字体大小：200%；” 就像“字体大小：32px；” 等等...
To create a layout with fonts that continuously scale with window resizing I think you could use jquery. Maybe a mix of "$( window ).resize" and ".css('font-size','value')" could work...
要使用随窗口大小调整而不断缩放的字体创建布局，我认为您可以使用 jquery。也许“$( window ).resize”和“.css('font-size','value')”的混合可以工作......
