为移动设备制作图像堆栈

Question

我正在尝试在桌面上并排创建一个包含两个图像的页面，然后将这些图像堆栈用于移动设备。我正在缩小我的浏览器窗口以模拟更小的屏幕。图像没有在移动设备上堆叠。这是我的html：

<div class="container-lp">
    <div class="col-2-lp">
      <h4><a href="#">Interior Decorating</a></h4>
      <div class="overlay">
        <a href="#"><img src="http://pjstagingdecorating.com/wp-content/uploads/2015/07/Interior-Decorating-Level-1B.jpg" alt="" /></a>
      </div>
      <div class="overlay"></div>
    </div>
    <div class="col-2-lp last-lp">
      <h4 class="landing-page"><a href="#">Home Staging</a></h4>
      <div class="overlay">
        <a href="#"><img src="http://pjstagingdecorating.com/wp-content/uploads/2015/07/Home-Staging-Level-1B.jpg" alt="" /></a>
      </div>
    </div>
  </div>

这是我的桌面 CSS：

.container-lp {
  width: 100%;
  max-width: 1280px;
  min-width: 320px;
  margin: 0 auto;
  clear: both;
}

.col-2-lp {
  float: left;
  width: 45%;
  margin-right: 5%;
}

.last-lp {
  margin-right: 0;
}

.col-2-lp img {
  width: 100%;
}

还有我的媒体查询：

@media only screen and (min-device-width: 320px) and (max-device-width: 600px) {
  .col-2-lp {
    width: 100%;
    float: none;
    margin: auto;
  }
  .last-lp {
    margin-right: auto;
  }
}

Answer 1

如果您只需要此功能，我建议您查找引导程序。您可以像这样在不接触 CSS 的情况下实现相同的目标：

<div class="container">
    <div class="row">
        <div class="col-sm-6"><img src="#"></div>
        <div class="col-sm-6"><img src="#"></div>
    </div>
</div>

Answer 2

这是一个例子：

将所有内容设置为100%，然后在一定宽度以上设置为50%，然后它应该并排。

.image {
  width: 100%;
}

@media screen and (min-width: 780px) {
  .image {
    width: 50%;
  }
}

这是一个jsfiddle，显示了一个简单的示例

Answer 3

您的代码没有问题。你不能在电脑浏览器上测试设备媒体查询试试这个

@media only screen and (min-width : 320px) and (max-width : 600px) {
}