媒體查詢瀏覽器大小寬度小於高度

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 */ 
}