Question

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

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

getting parameters from url in angularjs controller

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>

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

1 个答案: