时间戳

首页 > 解决方案 > @Media 不删除图像

html - @Media 不删除图像

问题描述

我正在尝试使该网站对移动设备友好一点。我在菜单/导航和主要内容之间有一个图像（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/缓存，它仍然存在。在此处查看实时站点

标签： htmlcssimagemedia-queriesdisplay

解决方案

好吧，这将适用于 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;
}

检查此片段：

@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>

希望我能帮上忙

推荐阅读