JQuery Mobile和CSS3媒體查詢

Question

我正在編寫一個移動友好的網頁，並且是JQuery Mobile。但是，在我的CSS中，我正在使用一些媒體查詢。除了如果我想使用AJAX（JQueryMobile的'data-ajax'屬性）加載頁面，這一切都很好。如果我這樣做，就不會出現媒體查詢被考慮在內的情況。只有當我刷新媒體查詢出現的頁面。

有沒有人在這方面有過任何經驗，或者他們可以擺脫我的這種情況？

我已經在azure上發佈了一個示例來演示。它包含一個登錄表單（不需要用戶名或密碼 - 只需點擊「登錄」）。在目標（home.html）上有一個div，它應該使用大於767px的寬度的媒體查詢來隱藏）。但是，當我調整窗口的大小時，它並不隱藏。只有當我重新加載頁面並調整大小時纔會發生。

在這裏看到：提前http://testjquerymob.azurewebsites.net/index.html

感謝。

T

Answer 1

啊哈！

在我身邊很愚蠢的錯誤。正如我在上面提到的響應hungerpain我在包含<style>標籤內的媒體查詢CSS。在從包含的樣式表中移動它們之後，我認爲它會對問題進行排序。事實證明它沒有。但是，我發現後發現它在加載頁面（我加載目標URL的頁面）內，我應該引用包含的樣式表或至少在<style>標記中添加媒體查詢。

因此，要總結 -

1. 我裝的index.html
2. 我想home.html的加載到它，並根據視口大小home.html的隱藏DIV。
3. 相反的，包括在home.html的媒體查詢，因爲我在做我應該已經包含在父頁面的媒體查詢/樣式 - 的index.html，因爲它是到該頁面的html內容home.html的將被載入

謝謝你們，

牛逼