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

Question

浏览器大小的媒体查询 where width < height?

我试过了

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

但这行不通。请帮忙。

用例:

• 如果 (width > height)，我水平对齐元素
• 如果(宽度 < 高度)，我想垂直对齐元素。

Answer 1

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

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

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

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