css - 如何使用媒体查询使 div 根据屏幕的高度/宽度显示/消失？

Question

我有两个带有 ID#div1和#div2.

我想要：

• 显示 #div1 如果width >= 900px OR height >= 500px
• 否则显示#div2，即width < 900px OR height < 500px

如何通过媒体查询实现这一点？

我尝试了以下方法，但它不起作用：

@media (max-width: 900px), (max-height: 500px) {
  #div1 {
    display: block !important;
  }

  #div2 {
    display: none !important;
  }
}

@media (min-width: 901px), (min-height: 501px) {
  #div1 {
    display: none !important;
  }

  #div2 {
    display: block !important;
  }
}

我究竟做错了什么？

标签： csssassresponsive-design

Answer 1

在媒体查询中只需要一个

#div1 {
  display: none !important;
}

#div2 {
  display: block !important;
}

@media (min-width: 900px or min-height: 500px) {
  #div1 {
    display: block !important;
  }

  #div2 {
    display: none !important;
  }

}

你也不会那样做 OR 。请参阅上面的更改。