最大宽度和高度的媒体查询 - CSS

在网页设计中，当用户调整浏览器的窗口大小或在不同的设备上查看网页时，网页应该能够自适应自己的布局和样式。这就要求我们能够使用媒体查询来设置不同尺寸下的样式。

其中一种常见的媒体查询是最大宽度/高度（max-width/height）。这种媒体查询使得我们能够设置当浏览器窗口的宽度或者高度小于一定尺寸时，网页的样式会发生改变。

下面是一个例子：

@media (max-width: 768px) {
  body {
    background-color: blue;
  }
}

该代码片段展示了一个媒体查询。当浏览器的宽度小于等于 768 像素时，body 元素的背景颜色会变成蓝色。

我们可用 max-height 属性来设置最大高度，同样可以通过组合两个媒体查询，设置实现对宽度和高度的联合判断。

例如：

@media (max-width: 768px) and (max-height: 1024px) {
  body {
    background-color: blue;
  }
}

该代码片段展示了一个联合的媒体查询。当浏览器的宽度小于等于 768 像素 且 高度小于等于 1024 像素时，body 元素的背景颜色会变成蓝色。

通过使用最大宽度/高度的媒体查询，我们可以方便地为不同设备设置完美的布局和样式。