Chrome中的CSS媒体查询延迟？答案

【问题标题】：CSS media query latency in Chrome?Chrome中的CSS媒体查询延迟？
【发布时间】：2013-05-25 07:43:07
【问题描述】：

现在有一个非常奇怪的体验，我正在尝试在我正在开发的网络应用程序上实现响应式 CSS 媒体查询，只是想看看是否有人对为什么会发生这种情况有任何理论。

这里有一些上下文：

在本地服务器上运行的 Django 应用程序（localhost:8000 from manage.py runserver）
只是修改 style.css 文件，一切正常。如果我在 style.css 中进行了更改，刷新了更改，我的工作在浏览器中看起来很好
我正在测试 Chrome 和 Firefox 中的浏览器兼容性

所以工作流程正常进行，直到我开始在同一个 style.css 文件的底部编写一些媒体查询。一个例子是：

@media screen and (max-width: 1080px) {
    #hero .user-actions {
       float: left;
       width: auto;
    }
}

以下是 Chrome 中发生的情况：在我编写并保存该查询后，如果我将浏览器宽度从 1200 像素减少到 1000 像素以测试更改（通过多个第 3 方应用程序测量），则没有更改 - 媒体查询根本没有被发现。我在 Chrome 浏览器网站管理员工具的元素中看不到媒体查询（但它们在 Firefox 和其他浏览器中显示良好）。我试过 (1) 清除我的 Chrome 浏览器缓存，(2) 回到终端并运行

manage.py collectstatic

我查看了我的元视口标签，我检查了我的 CSS 语法，但我不知道为什么它没有在 Chrome 中专门读取它。现在，奇怪的是，如果我将 Chrome 浏览器的尺寸进一步减小到 965 像素或更窄，突然间我的最大宽度为 1080 像素的媒体查询会出现并开始在 Chrome 中工作。所以这就像在 chrome 获取媒体查询之前有 115px 的边距。嗯？有没有人经历过这样的事情？ Chrome 中是否有某些设置或我没有想到的某些设置可能会导致这种情况？我查看了其他一些帖子，并看到了对 -webkit 缩放错误的引用，但这里不是这种情况。

【问题讨论】：

提供重现问题的小型 codepen 或 jsfiddle 示例可能会帮助人们为您提供答案。
@JamesHolderness - 和我们其他人！

标签： css django responsive-design media-queries

【解决方案1】：

我没有答案……但我也有媒体查询加载/缓存问题。它是上周在我的 Chrome Canary 中开始的，从今天早上开始，我的 Chrome Dev (29.0.1521.3) 也感到同样的痛苦（是的，这很痛苦）。 p>

我的媒体查询

<link media="screen,projection,tv" href="style.css" rel="stylesheet" type="text/css" />
<link media="only screen and (min-width:250px) and (max-width:500px)" href="responsive-mobile.css" rel="stylesheet" type="text/css" />
<link media="print" href="print.css" rel="stylesheet" type="text/css" />

奇怪。去年夏天我实现了响应式媒体查询，直到上周 Canary 开始缓存我的 responsive-mobile.css 文件之前没有遇到任何问题。然后我意识到 Canary（现在是 Chrome 开发人员）正在加载我的 print.css 文件盎司我的 responsive-mobile.css 在将浏览器的视口从大到小再向后拉伸后加载。

所以不，对不起，我没有答案。但是一堆问题。 ;)

【讨论】：