Chrome中的CSS媒體查詢延遲？

現在有一個非常奇怪的經歷，試圖在我正在開發的Web應用程序上實現響應式CSS媒體查詢，只是想看看是否有人有任何理論來解釋爲什麼會出現這種情況。Chrome中的CSS媒體查詢延遲？

這裏的一些背景：

在Django應用程序的工作，在運行的LocalServer（本地主機：8000從manage.py runserver命令）
剛剛修改的style.css文件，一切都OK。如果我在style.css中的改變，刷新了變化，我的工作在瀏覽器看起來很好
我測試在Chrome &瀏覽器兼容火狐現在

所以，工作流程，直到我開始在正常進行在同一個style.css文件的底部寫一些媒體查詢。一個例子是：

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

，這裏是發生了什麼事在Chrome：我寫的，並保存了該查詢，如果我減少我的瀏覽器寬度，說1200像素到1000像素測試更改後（通過多種第三方應用程序測量），沒有變化 - 媒體查詢根本沒有被發現。我沒有在Chrome瀏覽器網站管理員工具中的元素中看到媒體查詢（但在Firefox和其他瀏覽器中顯示的很好）。我試過（1）清理我的Chrome瀏覽器緩存，（2）要返回到終端和運行

manage.py collectstatic

我看了看我的元標籤視，我檢查了我的CSS語法和我不不知道爲什麼它沒有專門在Chrome中讀取它。現在，奇怪的是，如果我將Chrome瀏覽器的尺寸進一步縮小到965像素寬度或更窄，突然間，我的最大寬度1080px媒體查詢顯示並開始在Chrome中工作。所以就像在chrome拿起媒體查詢之前有115px的邊距。咦？有沒有人經歷過這樣的事情？ Chrome中是否存在一些設置或者我沒有想到這可能會導致這種情況？我看了一些其他的帖子，看到一個-webkit縮放bug的引用，但這不是這種情況。

來源

2013-05-29 Chris B.

提供一個小型codepen或jsfiddle樣本來重現問題可能會幫助人們爲您提供答案。 –

@JamesHolderness - 以及我們其他人！ – nickhar

我沒有答案......但我也有一個媒體查詢加載/緩存問題。上週我開始在我的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" />

奇怪。我已經在去年夏天實施了我的響應式媒體查詢，直到金絲雀上週開始緩存我的responsive-mobile.css文件時才面臨任何問題。然後我意識到Canary（現在是Chrome Dev）正在加載我的print.css文件盎司我的responsive-mobile.css在我的瀏覽器的視口從大到小返回後加載。

所以不，我沒有回答抱歉。但是有一堆問題。 ;）

來源

2013-05-31 19:11:35 MartinDubeNet

Chrome中的CSS媒體查詢延遲？

回答

相關問題