Question

当用户在其设备上处于横向模式时，我有以下CSS来设置布局样式。当您以横向模式加载页面但在纵向模式下加载页面并更改方向时，它可以正常工作。肖像布局仍然在风景中。

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

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

}

我该如何解决这个问题？

Answer 1

尝试使用

@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之间，显示在景观。

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

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

以上，如果视口宽度的屏幕设备介于320px到 667px，媒体声明将返回true，因为第一部分，互为@media屏幕和（min-device-width：320px）和（max-device-width：667px）将适用于设备因此返回true，尽管我的屏幕设备将无法在第二个媒体中进行横向方向检查查询。同样，如果设备处于横向视口宽度为 800px，而第一个媒体查询将因视口而失败宽度，第二个媒体查询将成功，因此媒体声明将返回true。

Source

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

1 个答案: