设备方向更改时未拾取CSS样式

当用户在设备上处于横向模式时，我使用以下CSS来设置布局样式。当您以横向模式加载页面时，它会工作，但当以纵向模式加载页面时，您会更改方向。纵向布局仍保留在横向布局上

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px) 
and (orientation : landscape) { 

        .qv-overlay-container{
            top:0px;
        }
.........

}

如何修复此问题？

尝试使用

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px),
(orientation : landscape) {...}

---

解释

此处使用的“and”关键字将多种媒体功能组合在一起，以及将媒体功能与媒体类型组合在一起

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px) 
and (orientation : landscape) {...}

仅当媒体类型为屏幕时，上述媒体查询才适用 视口宽度在320px到667px之间，并且显示为 景观

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px) 
and (orientation : landscape) { 

        .qv-overlay-container{
            top:0px;
        }
.........

}

---

逗号分隔列表的行为类似于逻辑运算符或在媒体查询中使用时。使用逗号分隔的媒体查询列表时，如果任何媒体查询返回true，则将应用样式或样式表。逗号分隔列表中的每个媒体查询都被视为单个查询，应用于一个媒体查询的任何运算符都不会影响其他媒体查询。这意味着逗号分隔的媒体查询可以针对不同的媒体功能、类型和状态

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px),
(orientation : landscape) {...}

如果视口宽度在320px到320px之间的屏幕设备 667px，媒体声明将返回true，因为第一部分， 解释为@媒体屏幕和（最小设备宽度：320px）和（最大设备宽度：667px）将适用于 设备，因此返回true，尽管我的屏幕 设备将无法通过第二个介质中的横向方向检查 查询同样，如果设备位于视口宽度为 800px，而第一次媒体查询将由于视口而失败 宽度，则第二次媒体查询将成功，因此 语句将返回true

---

你在任何特定设备上都有这个问题吗？你能在这里用HTML和CSS创建代码片段，以便进行更详细的调试吗？我制作了一个测试页面，它在我的Moto android设备上工作，在改变方向时，iPhone模拟模式在PC chrome上工作。你的问题一定在别的地方。。。