媒体查询横向问题

Question

我正在开发一个自适应网站，我正在应用以下媒体CSS查询：

查询1：

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

QUERY2：

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

QUERY3：

@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：

QUERY3

QUERY2

QUERY1

这样，您的最后一级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;}}