html - 在手机上隐藏某些图像

Question

当网站在移动设备上运行时，我试图隐藏两张图片。我尝试了多种解决方案，但我似乎无法开始工作。

这是我的代码片段

<li style="background-image: url(images/img_bg_1.jpg);" class="hideimg">

和

@media screen and (max-width: 600px) {
  img.hideimg {
    display: none;
  }
}

Answer 1

您目前有两个主要问题。首先，您当前的 CSS 选择器 img.hideimg正在寻找 <img>元素。当您修改 <li> , 你会想使用一个选择器来寻找 <li>类似 li.hideimg 的元素或者不管是什么类型的元素.hideimg 都直接查找类.

其次，您直接使用 HTML 属性 ( style="" ) 分配背景图像。像这样的内联样式比样式表和样式 block 中的规则集具有更高级别的特异性，这意味着您以后将无法覆盖它(除非您使用 !important ，但您不想去那里!)

我会建议您从 HTML 中删除内联样式:

<li class="hideimg">

然后使用渐进增强的方法默认隐藏图片，然后在大屏幕上显示(而不是反过来):

li.hideimg {
  display: block;
  width: 300px;
  height: 200px;
  background: none;
}
@media screen and (min-width: 600px) {
  .hideimg {
    background-image: url("https://source.unsplash.com/random/300x200");
  }
}

在 this fiddle 中查看结果.