浏览器大小的媒体查询，其中宽度小于高度

Question

媒体查询浏览器大小，其中宽度＆lt;高度？

我试过

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

但这不起作用。请帮忙。

用例：

• if（width＆gt; height），我水平对齐项目
• if（width＆lt; height），我想垂直对齐项目。

Answer 1

有适合​​您需求的特殊媒体查询。

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

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

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