css - 媒体查询在不应该加载样式表时

Question

我已经设置了一个基本样式表和一个媒体查询样式表，遵循渐进增强的理念，如下所示:

<!-- Empty CSS file; base style for really old mobile browsers (128px,240px,<320px) -->
<link rel="stylesheet" href="css/global.css" media="all">
<!-- Layout for newer narrow viewport browsers, as well as desktop browsers -->
<link rel="stylesheet" href="css/layout.css" media="all and (min-width: 20em)">

但是，当我启动 Firefox 并将其调整为小于 320px 时，它仍然会加载 layout.css 而不是向我显示无样式的页面。这是为什么？

除此之外(而不是问一个单独的问题)，如果我向 global.css 添加一些基本样式并向 layout.css 添加单个媒体查询然后后一种布局会呈现并保留在页面上，即使我将浏览器的大小调整为小于要应用的 layout.css 的最小宽度也是如此。

Answer 1

这里的问题是 Firefox 的最小视口(viewport)宽度恰好比 320px 宽，这意味着无论您将窗口调整到多窄，它都不会小于 320 像素。您的 layout.css 样式将始终应用于 Firefox，因为视口(viewport)始终满足 320px 的 min-width 要求(可能 20em)。在 Chrome 中尝试您当前的设置(Chrome 通常具有更窄的最小视口(viewport)宽度)，并在 Firefox 中尝试类似 min-width: 600px 的设置，您的样式应该按预期应用(layout. css 将在视口(viewport)至少为 600px 宽时应用。

编辑

这是一个很好的媒体查询演示站点:Media Query Playground .它还可以让您查看各种浏览器的最小视口(viewport)宽度 - 只需调整大小直到宽度值停止变化。如果您在 Firefox 中更改工具栏(通过添加/删除元素)，您可以更改最小视口(viewport)宽度。