0

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

这里有一些上下文：

  • 在本地服务器上运行 Django 应用程序（来自 manage.py runserver 的 localhost:8000）
  • 只是修改 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 缩放错误的引用，但这里不是这种情况。

4

1 回答 1

0

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

我的媒体查询

<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 Dev）正在加载我的print.css文件，我responsive-mobile.css在将浏览器的视口从大到小再向后拉伸后加载了我的文件。

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

于 2013-05-31T19:11:35.480 回答