8

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

现场直播： http ://www.rubytuesdaycreative.co.uk/testsite/shop.html

在 Ethan Marcottes 的书之后，我将正文字体设置为font-size:100%，然后由上面链接页面上的 cpation 中的文本制作为 2ems - 所以基本尺寸加倍......我做错了吗？它似乎根本没有改变。

http://jsfiddle.net/jm3sK/

4

5 回答 5

11

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

如果您希望根据浏览器宽度更改任何 CSS，请使用@mediaqueries。

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

这是一个简单的例子。调整窗口大小。

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

​</p>

于 2012-10-16T11:49:33.787 回答
5

单位是指字体的em大小。它根本不依赖于浏览器窗口的宽度。

vw单位与窗口宽度有关：即视口宽度的 1/100 。但它在浏览器中的支持有限且有缺陷。

于 2012-10-15T22:05:36.213 回答
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();
});
于 2015-01-29T11:06:57.030 回答
0

我认为该表非常清楚，并且很好地说明了字体无法随窗口调整大小而缩放的原因。原因是 ems、percentage 甚至 rems 都是相对于浏览器默认字体（通常是 16px）而不是浏览器窗口的度量。所以如果你写“font-size: 100%;” 就像写“字体大小：16px;” 而不是“字体大小：窗口大小的 100%”。如果你写“字体大小：200%;” 就像“字体大小：32px;” ETC...

要创建一个带有随窗口大小调整而不断缩放的字体的布局，我认为您可以使用 jquery。也许“$（window）.resize”和“.css（'font-size'，'value'）”的混合可以工作......

于 2013-10-23T08:47:41.090 回答
0

在最近自己研究这个问题以进行响应式设计时......我遇到了这张很棒的桌子：http ://www.hubbers.com/index.php/converting-px-into-percentage-and-em-for-relative-css -字体大小/

它分解了表格中的像素、em 和百分比之间的转换，但更好的是，它提供了将这些从一个转换为另一个的简单公式，这对我来说非常有用，因为我正在动态确定字体大小

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

于 2013-09-10T13:56:04.813 回答