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

我正在尝试使用媒体查询根据窗口的宽度更改块中元素的宽度(这允许我增加页面上的列数而不更改列的宽度).我希望能够使用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;
    }
}

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

解决方法

不,你不能,因为在媒体查询中,“媒体查询中的相对单位是基于初始值,这意味着单位永远不会基于声明的结果.例如,在HTML中,’em’单位是相对于’font-size’的初始值.“(Media Query spec,第 6 Units条). font-size的初始值为medium,它以依赖于浏览器的方式映射到物理大小(与您在CSS中可以设置的任何内容无关).

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