CSS 媒体查询——浏览器宽度小于高度

在本文中，我们将介绍CSS媒体查询，特别是针对浏览器宽度小于高度的情况。媒体查询是一种CSS技术，用于基于设备的特征来应用不同的样式规则。通过使用媒体查询，我们可以根据浏览器宽度是否小于高度来为不同的设备设计和适配样式。

阅读更多：CSS 教程

CSS 媒体查询简介

CSS媒体查询是一种CSS3的功能，它允许我们根据设备的属性（如视口尺寸、设备方向和媒体类型）来应用不同的样式规则。媒体查询可以帮助我们实现响应式设计，让网页在不同的设备上都能良好地显示和适应。

以下是一个基本的媒体查询语法结构：

@media media-type and (media-feature) {
  /* styles applied when media feature is true */
}

在这里，media-type是指要应用样式的设备类型，如screen、print或all。media-feature是指要检查的设备属性，例如width、height、orientation等。

检查浏览器宽度小于高度

要应用于浏览器宽度小于高度的样式，我们可以使用min-aspect-ratio媒体特性。min-aspect-ratio用于指定浏览器视口宽度与高度之比的最小值。

以下是一个示例，演示当浏览器宽度小于高度时如何应用不同的背景颜色：

@media screen and (min-aspect-ratio: 1/1) {
  body {
    background-color: red;
  }
}

@media screen and (max-aspect-ratio: 1/1) {
  body {
    background-color: blue;
  }
}

在这个例子中，当浏览器宽度小于高度时，将应用红色背景色；当浏览器宽度大于高度时，将应用蓝色背景色。

此外，我们还可以使用其他相关的媒体特性，如max-width和min-width，来检查浏览器的宽度。

结合其他媒体查询

除了检查浏览器宽度小于高度之外，我们还可以结合其他媒体查询来更精确地控制样式。

例如，我们可以使用min-width和max-width来检查浏览器的宽度范围。以下是一个示例，当浏览器宽度在400px和600px之间时，应用不同的背景颜色：

@media screen and (min-width: 400px) and (max-width: 600px) {
  body {
    background-color: green;
  }
}

在这个例子中，只有当浏览器宽度在400px和600px之间时，才会应用绿色背景色。

示例应用

为了更好地理解和应用CSS媒体查询，让我们来看一个实际的示例。

假设我们正在设计一个网站页面，当用户的手机竖屏观看时，我们希望显示一个垂直排列的导航菜单；当用户的手机横屏观看时，我们希望显示一个水平排列的导航菜单。

我们可以使用@media媒体查询和flexbox布局来实现这个效果：

@media screen and (orientation: portrait) {
  .navbar {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (orientation: landscape) {
  .navbar {
    display: flex;
    flex-direction: row;
  }
}

在这个例子中，当用户在竖屏模式下浏览网页时，.navbar将以垂直方向排列；当用户在横屏模式下浏览网页时，.navbar将以水平方向排列。

通过上述示例，我们可以看到，使用CSS媒体查询的威力和灵活性。我们可以根据设备的特征和用户的需求，为不同的屏幕尺寸和方向提供最佳的用户体验。