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

Question

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

我试过了

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

但这不起作用。请帮忙。

用例：

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

Answer 1

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

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

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

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