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

Posted 2023-03-06

【中文标题】为啥 em font-size 不在响应式网格上调整大小？

【英文标题】：Why doesn't em font-size resize on responsive grid?为什么 em font-size 不在响应式网格上调整大小？

【发布时间】：2012-10-05 22:26:36

【问题描述】：

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

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

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

http://jsfiddle.net/jm3sK/

【问题讨论】：

能否在reduced test case中提供相关代码？很难知道“标题”是什么。

我已经添加了一个 JS Fiddle，但我试图让它响应式地工作，由于基于浏览器宽度减小尺寸的性质，很难让它在小机箱上工作。我试一试。然而，标题是白色厚字，每张图片上都有价格。它们的大小为 2em，但在调整浏览器窗口宽度时不会改变。

您打算如何调整它们的大小？响应式布局必须与视口的宽度有关，而不是字体的大小。

你的 jsfiddle 的 .caption em 确实改变了字体的大小。我将其更改为 1em 和 4em 都适用于 chrome 浏览器。哪个浏览器给您带来问题？

我使用的是 Chrome，我根本看不到它调整大小

【参考方案1】：

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

如果您将正文中的所有文本定义为百分比，然后在 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();
);

【讨论】：

多么好的答案。我在 Iphone 屏幕问题的 CSS 上浪费了两天时间。感谢您使用 JS 提供的最佳解决方案。

【参考方案2】：

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

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

【参考方案3】：

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

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

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

【参考方案4】：

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

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

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

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

bodyfont-size:100%;
ifont-size: 2em;


@media screen and (min-width: 500px) 
    bodyfont-size: 150%;


@media screen and (min-width: 700px) 
    bodyfont-size: 200%;

​

【参考方案5】：

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

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

【讨论】：

我正在阅读 Ethan Marcottes 关于 RWD 的书，它建议使用 EM，因为它们具有灵活性，并且可以在不应该使用设定像素大小的地方使用。这不正确吗？

em 单位确实很灵活，但是当用于font-size 时，它会根据父元素的字体大小而改变大小。要根据窗口宽度改变字体大小或其他显示问题，您可以使用@media 查询。

我怎样才能让它因父元素字体大小而异？是否可以使其随着标题 div 大小的变化而变化？

根据定义，设置 font-size: 2em 会将字体大小设置为父元素字体大小的 2 倍。但这根本不取决于父元素的大小；这取决于设置的字体大小。