在CSS媒体查询中更改图像

Question

我是一名业余爱好者

这个想法是媒体查询更改图像。

@media only screen and (min-width: 701px) {
  <<<large #sporter1 {
    display: block
  }
  #sporter2 {
    display: none;
  }
  #sportertable1 {
    display: block;
  }
  #sportertable2 {
    display: none;
  }
  #target1 {
    display: block;
  }
  #target2 {
    display: none;
  }
  #targettable1 {
    display: block;
  }
  #targettable2 {
    display: none;
  }
  #tactical1 {
    display: block;
  }
  #tactical2 {
    display: none;
  }
  #tacticaltable1 {
    display: block;
  }
  #tacticaltable2 {
    display: none;
  }
}

@media only screen and (max-width: 700px) {
  <<<small **#sporter1 {
    display: none;
  }
  <- This line not working** #sporter2 {
    display: block;
  }
  #sportertable1 {
    display: none;
  }
  #sportertable2 {
    display: block;
  }
  #target1 {
    display: none;
  }
  #target2 {
    display: block;
  }
  #targettable1 {
    display: none;
  }
  #targettable2 {
    display: block;
  }
  #tactical1 {
    display: none;
  }
  #tactical2 {
    display: block;
  }
  #tacticaltable1 {
    display: none;
  }
  #tacticaltable2 {
    display: block;
  }
}

<div class="contours">
  <div id="sporter1"><img src="images/a sporter barrel diagram lg.png" width="600"></div>
  <div id="sportertable1">
    <img src="images/sporter barrel table lg.png" width="600">
  </div>
  <div id="sporter2"><img src="images/sporter barrel diagram.png" width="430"></div>
  <div id="sportertable2"><img src="images/sporter barrel table.png" width="430"></div>
  Dimensions are in inches
</div>

问题是，一切都很完美，除了第一张图像没有“关闭”之外。

任何帮助都会很棒。

Answer 1

您已经删除了以下评论：

• <<
• <<
• <-此行不起作用**

这不是在CSS中注释代码的正确方法。使用/* */标记进行评论。

@media only screen and (min-width: 701px) {
  #sporter1 {
    display: block
  }
  #sporter2 {
    display: none;
  }
  #sportertable1 {
    display: block;
  }
  #sportertable2 {
    display: none;
  }
  #target1 {
    display: block;
  }
  #target2 {
    display: none;
  }
  #targettable1 {
    display: block;
  }
  #targettable2 {
    display: none;
  }
  #tactical1 {
    display: block;
  }
  #tactical2 {
    display: none;
  }
  #tacticaltable1 {
    display: block;
  }
  #tacticaltable2 {
    display: none;
  }
}

@media only screen and (max-width: 700px) {
  #sporter1 {
    display: none;
  }
  #sporter2 {
    display: block;
  }
  #sportertable1 {
    display: none;
  }
  #sportertable2 {
    display: block;
  }
  #target1 {
    display: none;
  }
  #target2 {
    display: block;
  }
  #targettable1 {
    display: none;
  }
  #targettable2 {
    display: block;
  }
  #tactical1 {
    display: none;
  }
  #tactical2 {
    display: block;
  }
  #tacticaltable1 {
    display: none;
  }
  #tacticaltable2 {
    display: block;
  }
}

<div class="contours">
  <div id="sporter1"><img src="images/a sporter barrel diagram lg.png" width="600"></div>
  <div id="sportertable1">
    <img src="images/sporter barrel table lg.png" width="600">
  </div>
  <div id="sporter2"><img src="images/sporter barrel diagram.png" width="430"></div>
  <div id="sportertable2"><img src="images/sporter barrel table.png" width="430"></div>
  Dimensions are in inches
</div>