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

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