Question

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

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

按照Ethan Marcottes的书，我将身体字体设置为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％响应。

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

Answer 4

最近我自己为响应式设计研究了这个问题......我偶然发现了这个奇妙的表：http://www.hubbers.com/index.php/converting-px-into-percentage-and-em-for-relative-css-font-sizes/

它打破了表格中像素，em和百分比之间的转换，但更好的是，它提供了将这些转换为另一个的简单公式，这在我的情况下非常有用，因为我正在动态确定字体大小< / p>

我同样认为，当窗口调整大小时，制作字体大小百分比将迫使它们像其他元素一样重新调整大小......但这不起作用（尽管在我看来应该这样）。最后，我最终使用Bookcasey所述的媒体查询以及上面提到的公式将百分比转换回em。

Answer 5

我认为该表非常清楚，并且很好地说明了字体无法通过窗口大小调整来缩放的原因。原因是ems，百分比甚至rems都是相对于浏览器默认字体（通常为16px）而不是浏览器窗口的测量值。所以，如果你写＆＃34; font-size：100％;＆＃34;就像写＆＃34; font-size：16px;＆＃34;而不是＆＃34; font-size：100％的窗口ize＆＃34;。如果你写＆＃34; font-size：200％;＆＃34;就像＆＃34; font-size：32px;＆＃34;等...

要创建一个带有字体的布局，这些字体会随着窗口大小调整而不断缩放，我认为您可以使用jquery。也许混合了＃34; $（窗口）.resize＆＃34;和＆＃34; .css（＆＃39; font-size＆＃39;，＆＃39;价值＆＃39;）＆＃34;可以工作......

为什么em font-size不会在响应式网格上调整大小？

5 个答案: