让 CSS 媒体查询使用 html 文档的 em 大小而不是浏览器？

Posted 2023-03-06

【中文标题】让 CSS 媒体查询使用 html 文档的 em 大小而不是浏览器？

【英文标题】：Make CSS media query use the em size of the html document rather than the browser?

【发布时间】：2011-06-01 21:49:32

【问题描述】：

我正在尝试使用媒体查询根据窗口的宽度更改元素的宽度（这允许我增加页面上的列数而不会改变列的宽度）。我希望能够使用 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 元素。我真的很希望根据我正在使用的文本的宽度触发媒体查询，有没有办法让它工作？

【问题讨论】：

可以重新设置正文的字体大小吗？

@Knu 你认为这会影响媒体查询中的 min-width 属性吗？为 html 设置字体大小也应该过滤到正文，不是吗？

“16px，我的浏览器的默认字体大小”它可能设置在 chrome css 的 body 上（有效地覆盖 html font-size）

你不能在媒体查询中使用 31.5em。不理想，但仍然比使用像素好。

【参考方案1】：

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

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

【参考方案2】：

来自 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) 采取不同的行为，您可能会获得更多我认为您所追求的效果。

【参考方案3】：

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

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

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

另见link