css - 如何将媒体查询仅应用于特定宽度范围

Question

如何在 360 像素 - 640 像素之间应用媒体查询。这与我的 (max-width: 320px) 媒体查询重叠。

@media screen and (min-width:360px) and (max-width:640px) and (orientation : landscape)

My webpage where the problem occurs

Answer 1

除了页面中的这个媒体查询之外，您什么都没有。如果要更改 320px 以下的内容，则需要单独声明。您应该声明影响页面宽度以下所有内容的媒体查询。

这是媒体查询如何工作的一个简单示例:http://jsfiddle.net/ra9ry8t4/1/

在 JSFiddle 中测试可能更容易，但这里它也是一个片段:

@media screen and (min-width: 480px) {
  body { 
    background-color: yellow;
  }
}

@media screen and (min-width: 320px) and (max-width:480px) {
  body { 
    background-color: blue;
  }
}

@media screen and (min-width: 320px) and (max-width:480px) and (orientation: landscape) {
  body { 
    background-color: green;
  }
}

@media screen and (max-width: 320px) {
  body { 
    background-color: red;
  }
}

<h1>Media Queries Example</h1>
<p>Increase or decrease the size of of this window to see the background color change</p>