html - 为移动设备制作图像堆栈

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

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

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