@media(max-width:780px)媒体查询不生效，视频网格响应式问题求助

DevOps 小满

2026-7-6

解决YouTube主页复刻的媒体查询失效与头像截断问题

一、修复媒体查询不生效问题

≤780px时2列布局不生效的核心原因大概率是CSS规则的层叠顺序错误，媒体查询遵循“后声明覆盖先声明”的优先级逻辑，如果小屏幕的媒体查询写在大屏幕规则或基础规则之前，就会被覆盖。

正确的CSS写法示例：

/* 基础样式：默认适配小屏幕（≤780px）显示2列 */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px; /* 保持网格间距统一 */
}

/* 屏幕≥781px时切换为3列 */
@media (min-width: 781px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 屏幕≥1000px时切换为4列 */
@media (min-width: 1000px) {
  .video-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

排查要点：

确认viewport元标签格式正确：<meta name="viewport" content="width=device-width, initial-scale=1.0">，避免多余属性干扰适配逻辑。
检查是否存在!important强制覆盖：如果之前给.video-grid的列数设置了!important，会导致媒体查询无法生效。
避免重叠规则冲突：不要给同一元素同时设置范围重叠的min-width和max-width规则，防止逻辑混乱。

二、修复用户头像截断问题

头像截断通常是容器尺寸限制或图片适配方式错误导致，可按以下方式修复：

正确的头像样式示例：

/* 头像容器 */
.user-avatar {
  width: 36px; /* 匹配YouTube默认头像尺寸，可按需调整 */
  height: 36px;
  border-radius: 50%; /* 实现圆形头像 */
  overflow: hidden; /* 裁剪超出容器的图片部分 */
}

/* 头像图片 */
.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例填充容器，避免变形或截断 */
}