Question

我试图制作一个简单的网页响应，但不知何故，在第一个突破点后，没有任何反应。我将整个代码放在这个小提琴中：https://jsfiddle.net/Cilvako/umwhLdqx/

Bellow是我试图使用的断点，但由于我无法完成第二次工作，所以仍然没有达到第三个。

/ 媒体查询 /

 @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，并使用＆＃39; {＆＃39;正确地关闭和打开它们。和＆＃39;}＆＃39;你不是小提琴。

Answer 2

如果可以的话，不要将device-width与正常的width混在一起。如果您只定位浏览器窗口大小，只需使用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之间，h1 s将为蓝色，在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;
  }
}

为什么我的媒体查询在第一个断点后无效？

4 个答案: