为什么在第一个断点后我的媒体查询无法正常工作？

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;
  }
}