為什么在第一個斷點后我的媒體查詢無法正常工作？

Question

我試圖使一個簡單的網頁響應，但是以某種方式，在第一個斷點之后，什么也沒有發生。 我將整個代碼放在這個小提琴中： https : //jsfiddle.net/Cilvako/umwhLdqx/

貝婁是我要使用的斷點，但是由於我無法完成第二個工作，所以還沒有到達第三個斷點。

/ 媒體查詢 /

 @media screen and (min-device-width : 1px) and (max-device-width : 480px) {

       }

 @media screen and (min-width : 481px) and (max-width :  768px) {


      }




 @media screen and (min-width : 769px) and (max-width :  1200px) {


    }




    @media only screen and (min-width : 1200px) {

       }

Answer 1

您應該在媒體查詢中編寫CSS，並且還可以使用“ {”和“}”來正確關閉和打開它們，而不必費力。

Answer 2

如果可以，請不要將device-width與常規width混合使用。 如果僅定位瀏覽器窗口大小，則只需使用min-width和max-width 。

如果您對CSS媒體查詢的最小寬度和最小設備寬度沖突感到困惑，請閱讀本文。

Answer 3

媒體查詢看起來像

@media screen and (min-width : 769px) and (max-width : 1199px) {
    h1 { color: blue; }
}

@media screen and (min-width : 1200px) and (max-width : 1800px) {
    h1 { color: green; }
}

因此，在769px和1199px之間， h1將是藍色，而在1200px和1800px之間，它們將是綠色。 我在您的JSFiddle中看不到-括號未正確閉合，並且我看不到您要如何使用規則。

Answer 4

您幾乎永遠都不需要max-width

小提琴

body {
  background: gray;
}


@media screen and (min-width: 500px) {
  body {
    background: red;
  }
}

@media screen and (min-width: 500px) {
  body {
    background: red;
  }
}

@media screen and (min-width: 800px) {
  body {
    background: lightblue;
  }
}

@media screen and (min-width: 1000px) {
  body {
    background: orange;
  }
}

@media screen and (min-width: 1300px) {
  body {
    background: pink;
  }
}