为什么我的媒体查询在第一个断点后不起作用？

Question

我试图让一个简单的网页响应，但不知何故，在第一个断点之后，没有任何反应。我把整个代码放在这个 fiddle: 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，并使用您不在 fiddle 上的“{”和“}”正确关闭和打开它们。

Answer 2

如果可以，请不要将 device-width 与正常的 width 混用。如果您只针对浏览器 window 大小，只需使用 min-width 和 max-width。

如果您感到困惑，请阅读此内容CSS media queries min-width and min-device-width conflicting?

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 之间，h1s 会是蓝色的，在 1200px 和 1800px 之间它们会是绿色的。我在你的 JSFiddle 中没有看到 - 括号没有正确关闭，我看不到你试图用规则做什么。

Answer 4

您几乎永远不需要 max-width

fiddle

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

为什么我的媒体查询在第一个断点后不起作用？

Why is my media query not working after first breakpoint?

html

css

responsive-design