html - @Media 图像设计

Question

我正在一个网站上工作，当设备宽度超过 425px (min-width: 425px) 时，我有两个图像需要内联，但对于某些原因是它似乎没有按应有的方式工作，我的 css 与 @media 但由于某种原因它不起作用，尽管它是相当基本的

代码

.info-img {
  width: 49.75%;
}
.info-images {
  display: inline-block;
  text-align: center;
}
@media screen and only (max-width: 425px) {
  .info-img {
    width: 100%;
    padding-bottom: 1px;
  }
  .info-images {
    display: block;
    text-align: center;
  }
}

<div class="info-images">
  <img src="https://dl.dropboxusercontent.com/s/dd5exdwwpa13yxnthg/unspecified-4.jpeg?dl=0" class="info-img">
  <img src="https://dl.dropboxusercontent.com/s/fo3bt6ruhx4qppztho/unspecified-6.jpeg?dl=0" class="info-img">
</div>
</div>
<style type="text/css">
  @import url('https://dl.dropboxusercontent.com/s/ikcsorhvohzdipo/information.css?dl=0');
</style>

Answer 1

问题是因为您将 inline-block 提供给父级而不是 img，而且您错误地编写了媒体(它不是 @media screen 并且仅，但@media仅屏幕和)。

代码片段

.info-images {
  font-size: 0;
  /* fix inline-block gap */
}
.info-img {
  width: 50%;
  display: inline-block;
  vertical-align:top; /* may be necessary */
  box-sizing: border-box;
  padding: 0 1%
}
@media only screen and (max-width: 425px) {
  .info-img {
    width: 100%;
    padding-bottom: 1px;
  }
  .info-images {
    display: block;
    text-align: center;
  }
}

<div class="info-images">
  <img src="//lorempixel.com/1600/900" class="info-img">
  <img src="//lorempixel.com/1600/900" class="info-img">
</div>