为什么不在响应式网格上调整em字体大小？

Question

我已经创建了一个响应式网格，并使用em作为字体大小来调整文本的大小，但我一定不能完全理解em的工作原理，因为没有调整文本的大小。

直播网站：http://www.rubytuesdaycreative.co.uk/testsite/shop.html

遵循伊桑·马科特的书，我已经将正文字体设置为font-size:100%，然后在上面链接的页面中由文本作为2ems -所以是基本大小的两倍……我做错了吗？它看起来一点都没有改变。

http://jsfiddle.net/jm3sK/

Answer 1

我认为您正在寻找的是@media查询。Em不是一个可以根据浏览器宽度调整大小的神奇单元。它是一个相对的单位。

如果您希望任何CSS根据浏览器的宽度进行更改，请使用@media queries。

在这种情况下，em非常有用，因为您只需更改一个值(body{font-size})即可缩放页面的所有其余部分。因为它们是相对的，而不是因为浏览器改变了。您可以同时使用这些技术。

这是一个快速的example。调整窗口大小。

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%;}
}

​

Answer 2

em单位表示字体的大小。它完全不依赖于浏览器窗口的宽度。

vw unit与窗口宽度相关:它表示视口宽度的1/100。但它在浏览器中的支持有限且有缺陷。

Answer 3

虽然这是一个老问题，但我最近想出了一个解决方案。

如果将正文中的所有文本定义为百分比，然后在document.ready和window.resize上调整正文中的文本大小，则文本将保持100%响应。

例如：

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();
});