横向媒体查询问题

Question

我正在开发一个响应式网站，并且我正在应用以下媒体 CSS 查询：

查询1：

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { /*My Styling*/}

查询2：

@Media screen and (max-width:768px) { /*My Styling*/ }

查询3：

@Media screen and (max-width:1024px) { /*My Styling*/ }

我也在做这个元语句：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1, user-scalable=no" />

由于某种原因，第二个和第三个查询应用得很好，但是当我测试第一个查询（实际上针对 iPhone 横向）时，没有应用定义的样式。

Answer 1

由于您没有为其他查询指定最小宽度，您应该像这样组织您的 css：

查询3

查询2

查询1

这样您的最后一级 css 将被正确应用，而不会被您的其他查询覆盖。

在 chrome 中以横向方式模拟 iphone 设备按预期工作： http://www.bootply.com/tumubw4Ztq

@Media screen and (max-width:1024px) { body{background-color:red;}}
@Media screen and (max-width:768px) { body{background-color:yellow;}}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { body{
 background-color:blue;}}