媒体查询宽度小于高度的浏览器大小 [英] media query for browser size where width is less than height

问题描述

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

我试过了@ b
$ b

  @media screen and（max-宽度：700px）和（最小高度：700px）{
  

但这不起作用。请帮助。

用例：

• if（width> height），我水平对齐项目


• if（width
  

  解决方案

  有一个特殊的媒体查询可以满足您的需求。 orientation 媒体查询允许我们根据当前屏幕或设备的方向定位特定的样式。我们有2个属性; 风景和肖像，它们允许我们根据浏览器当前的方向更改页面布局。

  
  
  

  浏览器或设备通过监听窗口的宽度和高度来确定方向。如果高度大于窗口的宽度，则窗口处于纵向模式。如果宽度大于横向模式下的高度。
  
  
  $ $ p $ / *纵向* /
@media屏幕和（方向：纵向）{
/ *纵向风格* /
}
/ *风景* /
@media屏幕和（方向：横向）{
/ *风景风格* /
}


  
  

  media query for browser size where width < height?

  I tried

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

  But that does not work. Please help.

  Use Case:

  • if (width > height), I align items horizontally
  • if (width < height), I WANT TO align items vertically.

  解决方案

  There's a special media query right for your needs.

  The orientation media query allows us to target specific styles based on the current screen or device orientation. We have 2 properties; landscape and portrait which allow us to change a pages layout based on the browsers current orientation.

  A browser or device determines the orientation by listening to the width and height of the window. If the height is larger than the width the window is in portrait mode. If the width is larger than the height it’s in landscape mode.

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

  这篇关于媒体查询宽度小于高度的浏览器大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！