我按照渐进式增强理念设置了基本样式表和媒体查询样式表，如下所示：
<!-- 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的最小宽度，也会显示页面。
答案 0 :(得分：2)
这里的问题是，Firefox的最小视口宽度恰好比320px更宽，这意味着无论您调整窗口大小有多窄，它都不会小于320px 。您的layout.css样式将始终应用于Firefox，因为视口始终符合min-width 320px的要求（可能20em）。尝试使用Chrome中的当前设置（Chrome通常具有较窄的最小视口宽度），并在Firefox中尝试类似min-width: 600px的内容，并且应按预期应用样式（当视口为时，将应用layout.css至少600px宽。）
这是一个很好的媒体查询演示网站：Media Query Playground。它将允许您查看各种浏览器的最小视口宽度 - 只需调整大小，直到宽度值停止更改。如果您在Firefox中对工具栏进行了更改（通过添加/删除项目），则可以更改最小视口宽度。