HTML/CSS图片画廊@media查询报错：提示需新增媒体查询如何解决？

数据老陈

2026-8-25

解决媒体查询报错的问题

系统提示“You should add a new @media query”，说明校验工具未识别到你正确添加的媒体查询，大概率是以下几个原因导致的：

媒体查询被嵌套在其他CSS规则内部
CSS中的@media查询必须作为顶层规则存在，不能放在某个选择器的大括号里。比如错误写法：

#gallery img {
  width: 33%;
  @media (max-width: 800px){
    width: 50%;
  }
}

正确做法是把@media查询单独放在CSS顶层，和其他规则同级：

/* 原有桌面端布局规则 */
#gallery img {
  width: 33%; /* 假设原先是三列布局 */
}

/* 新增的移动端媒体查询，独立放置 */
@media (max-width: 800px) {
  #gallery img {
    width: 50%;
  }
}

媒体查询语法存在细微格式问题
部分严格的校验工具会要求语法格式完全规范，比如@media括号与大括号之间加空格、属性值后保留空格等。调整格式后再尝试：
```
@media (max-width: 800px) {
  #gallery img {
    width: 50%;
  }
}
```
误修改已有媒体查询而非新增
如果之前已存在@media规则，你只是修改了它的内容，校验工具会判定你没有添加新的查询。此时要确保你新增了一个独立的@media代码块，而非在原有块内修改。