@Media 不删除图像答案

【问题标题】：@Media Not Removing Image@Media 不删除图像
【发布时间】：2021-05-16 19:12:43
【问题描述】：

我正在尝试使该网站更适合移动设备。我在菜单/导航和主要内容之间有一个图像（splitter-vertical.jpg）。我正在尝试使用：

@media (max-width: 800px) {
  img.splitter-off {
    display: none;
  }
}
.left-img-col {
  width: 8%;
  float: left;
  display: table-cell;
  vertical-align: top;
}

<div class="left-img-col">
   <img class="splitter-off" src="https://tlod.net/include/img/splitter-vertical.jpg">
</div>

在较小的屏幕上删除图像。

但无论大小（500 像素、300 像素、900 像素），图像都不会消失。我也试过 min-width: 并不能让它工作。无论浏览器窗口有多大，FireFox、Chrome 和 Edge 仍会显示它。即使清除了 cookie/缓存，它仍然存在。 View Live Site Here

【问题讨论】：

标签： html css image media-queries display

【解决方案1】：

在您的 style.css 文件中，您有以下代码：

@media (max-width: 800px) {
  img.splitter-off {
    display: none;
  }
}
img.splitter-off {
  display: block;
}

将此代码更改为：

 img.splitter-off {
      display: block;
    }
    @media (max-width: 800px) {
      img.splitter-off {
        display: none;
      }
    }

您应该在主 css 之后使用媒体查询。

【讨论】：

好吧，我在搞砸它并且：@media (min-width:0px) and (max-width:1200px) { img.splitter-off { display: none; margin: 0 auto; } } 我也删除了：img.splitter-off { display: block; } 工作，但现在主要内容并没有像以前那样移动到导航下方，只是塞进导航. （上面链接中的更新文件）。
您必须像这样将媒体查询添加到.right-col：`@media (max-width: 800px) { .right-col { width:95%}}
请点赞
谢谢。那行得通。也很快将其更改为 flexbox，因此它的响应性也更好。

【解决方案2】：

这将适用于 safari，但不适用于任何其他浏览器。

问题是你错过了media-type。

你写了@media (max-width: 800px)

CSS 应如下所示：

@media screen and (max-width: 800px) {
  img.splitter-off {
    display: none;
  }
}
.left-img-col {
  width: 8%;
  float: left;
  display: table-cell;
  vertical-align: top;
}

检查这个sn-p：

@media screen and (max-width: 800px) {
  img.splitter-off {
    display: none;
  }
}
.left-img-col {
  width: 8%;
  float: left;
  display: table-cell;
  vertical-align: top;
}

<div class="left-img-col">
   <img class="splitter-off" src="https://tlod.net/include/img/splitter-vertical.jpg">
</div>

希望我能帮上忙

【讨论】：