Css 关于景观定位的媒体查询问题

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

查询1:

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

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

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

查询2:

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

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

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

查询3:

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

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

@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环境）时，没有一个定义的样式被应用。

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

问题3

问题2

问题1

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

在chrome中以横向或纵向方式模拟iphone设备可按预期工作：

---

尝试将媒体大写字母中的“M”设置为第二个和第三个查询是否确实没有应用样式，但会被第二个和第三个媒体查询覆盖？@JamesDonnelly没有，因为我将浏览器设置为该宽度，并检查它们在呈现的css列表中显示的元素。当我实现上述建议时，由于某些原因，当我更改查询顺序时，它们不会被应用：S。。。然而，当我将查询1、查询2、查询3放在这个顺序中时，查询2和查询3起作用，但查询1不起作用……原因是什么？@user3690480您肯定是在用这种方式覆盖您的样式，您能将完整的css粘贴到小提琴上（或代码笔或botply或其他任何东西）吗通过某种演示，我可以调试？@user3690480 gona需要DOM元素，否则我无法预览结果，而且似乎缺少1个查询，css的格式也不正确