媒體查詢選擇不同的960 g

Question

我使用下面的代碼來根據瀏覽器的窗口大小選擇不同的css文件。但是，當我調整窗口大小時，即使刷新頁面，第一個窗口似乎也不工作。我不知道我應該如何解決這個問題。謝謝。

@import url("css/960.css") screen and (max-device-width: 1200px); 
@import url("css/2520.css") screen and (max-device-width: 2560px); 

Answer 1

隔空猜在這裏，但因爲你使用max-device-width而不是max-width我不認爲它會奏效。

device-width是設備能夠顯示的虛擬像素。

Device-width (Mozilla) - 描述了輸出裝置的寬度（這意味着在整個屏幕或頁面，
而不僅僅是描畫區域，如文檔窗口）。

我不認爲你可以通過改變瀏覽器窗口的大小來僞造。

max-width另一方面是瀏覽器中顯示的實際視口的度量。

Width (Mozilla) - 寬度媒體特徵描述的 寬度輸出設備的呈現表面（如 文檔窗口的寬度，或在網頁盒的打印機上的寬度）。

那麼你的選擇是要麼嘗試使用最大寬度：

@import url("css/960.css") screen and (max-width: 1200px); 
@import url("css/2520.css") screen and (max-width: 2560px); 

，或者嘗試使用某種設備模擬器的像一個iPad模擬器或實際設備來測試你的媒體查詢是否工作正常。