css - 浏览器是否缓存了不相关的媒体查询？

Question

例如，在具有多个媒体查询部分的虚构样式表中，浏览器只会处理相关媒体查询中的规则

@media screen and (max-width: 400px) {
    .container {
        width: 95%;
    }
}
@media screen and (max-width: 800px) {
    .container {
        width: 80%;
    }
}

.container 在屏幕上的宽度为 95%，最大宽度为 400 像素。

我的问题是:即使最大 400px 的媒体查询是唯一相关的(在这个虚构的例子中)，最大 800px 的媒体查询是否会被浏览器缓存，即使它是不相关的，或者不是吗？

Answer 1

浏览器可能缓存包含这些媒体查询的整个 CSS 文件，但浏览器不会缓存 CSS 文件的特定部分。

因此，为了回答您的问题，是的，浏览器可能会缓存媒体查询的非事件部分，因为它可能(并且可能会)缓存整个 CSS 文件。