@Media 不删除图像

Question

我正在尝试使网站对移动设备更友好。我在 menu/nav 和主要内容之间有一张图片 (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 无论浏览器window 有多大，都会显示。即使清除了 cookies/cache，它仍然存在。 View Live Site Here

Answer 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;
      }
    }

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

Answer 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;
}

查看此代码段：

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

希望能帮到你

@Media 不删除图像

@Media Not Removing Image

html

css

image

media-queries

display