在当今多设备并存的时代，响应式网页设计已不再是一个可选项，而是现代前端开发的基石。我们经常需要面对各种尺寸的屏幕——从巨大的桌面显示器到小巧的智能手表。你是否曾遇到过这样的情况：一个布局在宽屏下完美无缺，但在屏幕变窄或者窗口高度变矮时却崩坏了？
这就是 CSS 媒体查询大显身手的地方。在这篇文章中，我们将深入探讨 CSS 媒体查询中一个非常具体但极其强大的特性：如何结合使用 max-width（最大宽度）和 max-height（最大高度），并通过 “或”逻辑 来精准控制样式的应用。我们将一起探索其背后的语法细节，通过丰富的实战代码示例来理解它的工作原理，并分享在实际开发中运用这一技术的最佳实践和性能优化建议。
什么是 CSS 媒体查询？
简而言之，CSS 媒体查询让我们能够根据设备的特性（如视口宽度、高度、方向、分辨率等）有条件地应用样式。它是实现响应式设计的核心机制。
CSS 中的 @media 规则 是我们编写这些查询的容器。在这个规则内部，我们可以定义一个或多个“媒体条件”。当这些条件评估为真时，包裹在其中的 CSS 声明块就会被浏览器执行。我们可以针对打印样式调整布局，也可以根据屏幕的宽高比重新排列元素。
常见的媒体特性包括 INLINECODE43bfbf38（宽度）、INLINECODE5d6e194e（高度）、INLINECODE30fa8563（长宽比）以及 INLINECODE6598f1e0（方向，如横屏或竖屏）等。在本文中，我们将重点关注 INLINECODE9accb2fa 和 INLINECODE4bad1fa8。
理解 max-width 与 max-height
在深入组合逻辑之前，让我们先快速回顾一下这两个基础属性：
- max-width：当浏览器视口的宽度小于或等于指定值时，样式生效。这是移动端优先设计策略中最常用的属性，用于处理窄屏设备。
- max-height：当浏览器视口的高度小于或等于指定值时，样式生效。这在处理高度受限的窗口（例如分屏浏览或手机横屏时）非常有用。
核心概念：实现“或”逻辑
在 CSS 媒体查询中，逗号（,）扮演着逻辑运算符 “OR” 的角色。这意味着，如果用逗号分隔多个媒体条件，只要浏览器满足其中任意一个条件，样式就会被应用。
语法结构如下：
@media (max-width: 768px), (max-height: 500px) {
/* 当视口宽度 <= 768px 或 视口高度 <= 500px 时应用样式 */
body {
background-color: lightgray;
}
}
``
这种逻辑非常强大。想象一下，你正在开发一个网页。你可能希望它在手机竖屏（宽度窄）上显示单栏布局，同时也希望在手机横屏（高度矮）或被压缩的桌面窗口上显示单栏布局。如果只使用 `max-width`，横屏手机可能因为宽度足够而保留双栏布局，但此时高度太小，体验会很差。通过“或”逻辑，我们可以确保在这两种情况下都触发优化后的样式。
### 实战代码示例
让我们通过几个具体的场景来加深理解。我们将从基础开始，逐步构建更复杂的逻辑。
#### 示例 1：基础的颜色响应
在这个简单的例子中，我们有一个居中的盒子。默认情况下，它是蓝色的。但是，如果屏幕太窄（宽度小于 600px）**或者**屏幕太矮（高度小于 400px），我们将把它的背景颜色变为灰色，以示警告或进行视觉调整。
你可以尝试调整浏览器窗口的大小来观察效果：试着把窗口拉窄，或者把窗口压扁。
html
/ 基础重置与布局样式 /
body {
font-family: ‘Segoe UI‘, Roboto, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f0f2f5;
}
.responsive-box {
width: 300px;
height: 200px;
background-color: #3498db; / 默认蓝色 /
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: background-color 0.3s ease, transform 0.3s ease;
}
/ 核心：使用逗号实现 OR 逻辑 /
@media (max-width: 600px), (max-height: 400px) {
.responsive-box {
background-color: #7f8c8d; / 变为灰色 /
transform: scale(0.95);
}
}
调整窗口宽度或高度试试！
#### 示例 2：结合 AND 与 OR 的复杂逻辑
在实际开发中，我们经常需要更精确的控制。我们可能想要锁定一个特定的宽度范围，同时又要考虑高度因素。这时就需要组合使用 **“and”** 逻辑（所有条件都要满足）和 **“or”** 逻辑（满足任意一个）。
**场景描述：**
我们有两个卡片。我们希望隐藏第二个卡片（`.box-2`），如果满足以下**任一**条件：
1. 视口宽度在 600px 到 900px 之间（这通常意味着平板或小型笔记本窗口）。
2. 视口高度小于 500px（这通常意味着横屏手机或分屏界面）。
**语法解析：**
`@media (min-width: 600px) and (max-width: 900px), (max-height: 500px)
这里的逗号 `,` 分隔了两个大的逻辑组。
html
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
background-color: #fafafa;
color: #333;
}
h2 { margin-bottom: 30px; color: #2c3e50; }
.container {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
.card {
background-color: #2ecc71; / 绿色卡片 /
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
font-weight: bold;
color: white;
}
/ 复杂媒体查询 /
/ 逻辑 A: (min-width: 600px) AND (max-width: 900px) /
/ 逻辑 B: (max-height: 500px) /
/ 最终逻辑: 逻辑 A OR 逻辑 B /
@media (min-width: 600px) and (max-width: 900px),
(max-height: 500px) {
.box-2 {
display: none; / 隐藏第二个盒子 /
}
.box-1 {
background-color: #e74c3c; / 变红色以示状态改变 /
}
}
调整宽度至 600-900px 之间，或高度小于 500px
#### 示例 3：实际应用场景——响应式导航栏
让我们看一个更贴近实战的场景：导航栏的适配。
通常在桌面端，我们有足够的空间显示完整的水平菜单。但是在手机竖屏（宽度小）时，我们需要把菜单折叠成“汉堡按钮”。然而，仅仅判断宽度是不够的。如果用户在桌面显示器上把浏览器窗口的高度压得很低（比如在看视频的同时浏览网页），水平导航栏可能会因为高度不够而显得拥挤或被遮挡。
在这个例子中，我们将演示如何根据宽度或高度来切换导航栏的布局模式。
html
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: ‘Helvetica Neue‘, Helvetica, Arial, sans-serif;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 0 20px;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
}
.logo { font-size: 1.2rem; font-weight: bold; }
.nav-links {
display: flex;
list-style: none;
gap: 20px;
}
.nav-links li a {
color: white;
text-decoration: none;
}
/ 移动端菜单图标（默认隐藏） /
.menu-icon {
display: none;
font-size: 1.5rem;
cursor: pointer;
}
/ 媒体查询：当宽度太窄（模拟手机）或者高度太矮（模拟分屏/横屏）时 /
@media (max-width: 700px), (max-height: 400px) {
.nav-links {
display: none; / 实际开发中可能会变成下拉菜单 /
}
.menu-icon {
display: block; / 显示汉堡图标 /
}
header {
background-color: #444; / 稍微改变背景色以提示状态切换 /
}
}
请尝试调整浏览器窗口大小。
当宽度小于 700px 或 高度小于 400px 时，导航链接将隐藏。
“INLINECODE2d94a2b2max-heightINLINECODEfcc6f8b0min-widthINLINECODE36a8b755min-heightINLINECODE9a85db75max-widthINLINECODEeabc5561max-widthINLINECODE07443ca7max-width: 375pxINLINECODE7a6ba31dandINLINECODEbab816af,INLINECODE183999f7transitionINLINECODEcef9df60orINLINECODEd7fed591@media (max-width: 500px) or (max-height: 500px)INLINECODE26b01662orINLINECODEca743ad0notINLINECODE7e86a2fconlyINLINECODEb7516a87notINLINECODEbc91ec56max-widthINLINECODEd8779280max-heightINLINECODE0c8fa42c@media (max-width: …), (max-height: …)`，你可以构建出更加健壮、能够适应各种极端或独特视口环境的网页应用。希望这篇文章中的示例和解释能帮助你在下一个项目中写出更棒的响应式代码！
现在，打开你的编辑器，尝试为你当前的页面添加一个针对高度小于 600px 的优化样式吧。