如何正确使用 CSS 媒体查询实现响应式视频网格布局-html教程-PHP中文网

本文详解为何 @media (max-width: 780px) 规则未生效，并提供结构清晰、无冲突的断点写法，确保 .video-grid 在 ≤780px 时稳定显示为双列布局，同时避免媒体查询重叠导致的样式覆盖问题。

本文详解为何 `@media (max-width: 780px)` 规则未生效，并提供结构清晰、无冲突的断点写法，确保 `.video-grid` 在 ≤780px 时稳定显示为双列布局，同时避免媒体查询重叠导致的样式覆盖问题。

在构建 YouTube 风格首页时，响应式视频网格（.video-grid）是核心布局组件。你期望在屏幕宽度 ≤780px 时切换为两列（1fr 1fr），但在实际测试中该规则未生效——这通常并非语法错误，而是媒体查询逻辑冲突所致。

你原始代码的关键问题在于这一行：

@media (min-width: 781px), (max-width: 999px) { ... }

它使用了逗号分隔的并集查询（OR 逻辑），意味着只要满足 min-width: 781px 或 max-width: 999px 中任一条件即触发。而 min-width: 781px 在绝大多数桌面/平板设备上恒为真（例如 1200px 宽度同时满足 min-width: 781px），因此该规则会持续覆盖后续更窄断点的样式，导致 (max-width: 780px) 完全失效。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

✅ 正确做法是采用互斥、有序、无重叠的断点设计，推荐按移动优先（mobile-first）原则从窄到宽书写：

/* 移动端：≤780px → 双列 */
@media (max-width: 780px) {
  .video-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px; /* 建议补充合理间距 */
  }
}

/* 平板：781px – 999px → 三列 */
@media (min-width: 781px) and (max-width: 999px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

/* 桌面：≥1000px → 四列 */
@media (min-width: 1000px) {
  .video-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

⚠️ 关键注意事项：

避免使用逗号分隔多个条件（如 (min-width: A), (max-width: B)），它等价于“任意一个成立即匹配”，极易引发意外覆盖；
使用 and 连接 min-width 与 max-width 实现精准区间匹配；
确保断点边界值不重叠且无缝衔接（如 780px / 781px），推荐用整数并明确归属（例如 ≤780px 和 ≥781px）；
务必在 HTML 中添加响应式视口声明（虽你已添加，但仍需确认）：
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
若视频缩略图（如用户头像）被裁切，大概率是子项（如 .video-card）未设置 overflow: hidden 或图片未使用 object-fit: cover，可补充如下修复：
```
.video-card img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
```

最后，建议使用浏览器开发者工具的「Toggle device toolbar」实时调试不同宽度下的计算样式（Computed Tab），直接查看 .video-grid 的 grid-template-columns 是否被正确应用——这是验证媒体查询是否生效的最可靠方式。