CSS Media Query無法正常工作-嘗試加載兩個差異。 基於瀏覽器寬度的樣式表

Question

因此，我在頁面上使用了兩個媒體查詢：

<link rel="stylesheet" media="screen and (max-device-width: 1099px)" href="./src/css/narrow.css" />

<link rel="stylesheet" media="screen and (min-width: 1100px)" href="./src/css/main.css" />

main.css默認加載，但是當瀏覽器的大小調整為1100px以下時，它僅不加載樣式表，因此整個頁面均不呈現樣式。

有人知道我在做什么錯嗎？ 另外，在“ main.css”內部不能使用媒體查詢嗎？ 所以我只能根據瀏覽器的寬度來更改某些元素，而不是加載一個全新的樣式表？ 謝謝大家:)

Answer 1

是的，您可以在主樣式表中完成所有操作，因此如下所示：

@media only screen and (max-width: 1099px){
 /* css here */
}

@media only screen and (min-width: 1100px){
 /* css here */
}

實際上，我還注意到您具有max- device -width：處於打開狀態，因此僅定位到ipad / iphone等，這可能就是為什么您在桌面上看不到此樣式表的原因

Answer 2

另一種選擇是使用Javascript / Jquery來檢測屏幕尺寸並基於該屏幕尺寸加載不同的樣式表，但是Adam的解決方案可能更好，除非您出於特殊原因需要分開樣式表。

本文將為您提供使用jquery所需的所有信息-http: //css-tricks.com/resolution-specific-stylesheets/

Answer 3

您還可以使用多個查詢-每次我對看起來不太合適的寬度進行一次新查詢。

@media (max-width:319px) {
 // styles
}
@media (min-width:320px) and (max-width:479px) {
 // styles
}
@media (min-width:480px) and (max-width:479px) {
 //styles
}
etc..., etc...

通常，我還將在需要查詢的每個元素上構建查詢。 我發現，將樣式查詢的所有規則放在樣式表的一個部分中時，維護起來會很混亂。

例如：

div.box {
  width: 100%;
}
@media (...) {
  width: 80%;
}
@media (...) {
  width: 60%;
}
etc...

然后在另一個需要調整大小的元素上，我將做同樣的事情：

div.otherbox {
  width: 100%;
}
@media (...) {
  width: 80%;
}
@media (...) {
  width: 60%;
}
etc...