媒体查询浏览器大小宽度小于高度

Question

媒体查询浏览器大小宽度<高度？

我试图

@media screen and (max-width: 700px) and (min-height: 700px) { 

但是，这并不工作。请帮忙。

使用案例：

• 如果（宽度>高度），I项对齐水平
• 如果（宽度<高度），我想垂直对齐的物品。

Answer 1

有一个特殊的媒体查询权限可满足您的需求。

orientation媒体查询允许我们根据当前屏幕或设备方向定位特定样式。我们有2个属性; 风景和肖像它们允许我们根据浏览器的当前方向更改页面布局。

浏览器或设备通过侦听窗口的宽度和高度来确定方向。如果高度大于窗口的宽度，则窗口处于纵向模式。如果宽度大于横向模式下的高度。

/* Portrait */ 
@media screen and (orientation:portrait) { 
    /* Portrait styles */ 
} 
/* Landscape */ 
@media screen and (orientation:landscape) { 
    /* Landscape styles */ 
}