8

我正在尝试使用媒体查询根据窗口的宽度更改块中元素的宽度（这允许我增加页面上的列数而不改变列的宽度）。我希望能够使用 em 而不是像素来做到这一点，这样如果您更改字体大小，一切都会看起来正确。但是，如果我使用以下内容：

html {
    font-size: 12px; /* you could also use 75% if you want to be percent based.*/
}

@media screen and (min-width: 42em) {
    div#page {
        width: 42em;
    }
}

当窗口的最小宽度达到 42 * 16px，我的浏览器（Safari）的默认字体大小时，将触发媒体查询，而 div#page 的宽度将为 42 * 12px，继承自 html 元素的字体大小. 我真的很希望根据我正在使用的文本的宽度触发媒体查询，有没有办法让它工作？

4

3 回答 3

5

不，你不能，因为在媒体查询中，“媒体查询中的相对单位是基于初始值的，这意味着单位永远不会基于声明的结果。例如，在 HTML 中，'em' 单位是相对于 'font-size' 的初始值的。” （媒体查询规范，第6 条单元）。font-sizeis的初始值medium，它以依赖于浏览器的方式映射到物理大小（独立于您可以在 CSS 中设置的任何内容）。

结论取决于您如何设置字体大小。如果您以像素为单位设置根元素的字体大小，那么在媒体查询中使用像素也是合乎逻辑的，因为使用em不会提供任何灵活性。如果您将根元素的字体大小设置为百分比，则在媒体查询中使用是有意义的em，但您只需要考虑这em意味着浏览器的默认字体大小，您需要选择相应的乘数em。

于 2014-06-11T21:15:27.460 回答
4

来自 W3C (http://www.w3.org/TR/CSS21/syndata.html)
'em' 单位等于使用它的元素的 'font-size' 属性的计算值。例外情况是'em' 出现在 'font-size'属性本身的值中，在这种情况下，它指的是父元素的字体大小。

html { font-size:1em; width:42em; }
body { font-size:1.6em; }

@media screen and (max-width:40em) {
    div#page { font-size:0.875em; } /* 14px font */
}

注意：42em 可能永远不会是浏览器窗口宽度的 100%。如果您更改 @media 以针对不同的屏幕宽度采取不同的行动(max-width:1200px)，(max-width:1024px)您可能会获得更多我认为您所追求的效果。

于 2011-02-14T13:44:27.033 回答
1

我一直在研究同样的事情，AFAIK 无法更改浏览器/设备的“本机”字体大小；但如果你以某种方式看待它，这实际上是好的。

media-query 和 html 标签——如果以相对单位设置——指的是任何给定设备或浏览器上的相同基数（在桌面浏览器的情况下为 16px，但在其他设备上可能不同，或者如果用户更改缩放）。

因此，如果您将 html 文本大小设置为此值的百分比或 em 度量（对于相当于 12px 的桌面，请使用 75% 或 0.75em），然后根据像素宽度除以该值来设置媒体查询（对于相当于 960px 的桌面，使用 60em），所有的东西都应该以每个缩放级别放置在每个设备上。

另请参阅此链接

于 2012-06-29T10:55:01.800 回答