屏幕尺寸小于500px时，使用javascript垂直堆叠图像

Question

当屏幕尺寸小于500px (例如)时，我尝试使用javascript将图像堆叠在两个顶部。这些图像中的每一个都可以有一个href链接，但并不总是这样。

下面是大于500px的html示例：

<div id="topbanners1-4-a" style="display: inline-block; white-space: nowrap">
  <img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/0.png" style="width: 25%; margin-bottom: 10px" alt="" />
  <img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/2.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
  <a href="https://www.mysite.co.uk/Silentnight-Divan-Beds-and-Mattresses-c99">
    <img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/4.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
  </a>
  <img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/3.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
</div>

我找不出最好的方法来做这件事。最终，当屏幕尺寸小于500px时，我希望有这样的东西：

<div id="topbanners1-4-a" style="display: inline-block; white-space: nowrap">
  <div id="one">      
    <img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/0.png" style="width: 25%; margin-bottom: 10px" alt="" />
    <img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/2.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
 </div><div id="two">
  <a href="https://www.mysite.co.uk/Silentnight-Divan-Beds-and-Mattresses-c99">
    <img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/4.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
  </a>
  <img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/3.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
 </div>
</div>

到目前为止，这里有一个示例，尽管缺少图像：http://plnkr.co/edit/obLQorTFEsI467AHJspm?p=preview

寻找任何帮助或建议，将帮助我实现这一点。

Answer 1

你可以使用javascript及其matchMedia和修改内联样式，但建议使用类和外部CSS规则。

堆栈代码段

​

function watchMedia(wM) {
    if (wM.matches) { // If media query matches
        document.querySelector('#topbanners1-4-a').style.whiteSpace = "normal";
        var imgs = document.querySelectorAll('#topbanners1-4-a img');
        for(var i=0;i<imgs.length;i++){
          imgs[i].style.width = "calc(50% - 10px)";
          imgs[i].style.marginBottom = "10px";
          if (i % 2 == 1)
            imgs[i].style.marginLeft = "10px";
        }
    } else {
        document.querySelector('#topbanners1-4-a').style.whiteSpace = "nowrap";
        var imgs = document.querySelectorAll('#topbanners1-4-a img');
        for(var i=0;i<imgs.length;i++){
          imgs[i].style.width = "25%";
          imgs[i].style.marginBottom = "0";
          if (i % 2 == 1)
            imgs[i].style.marginLeft = "0";
        }
    }
}

var wM = window.matchMedia("(max-width: 700px)")

watchMedia(wM)             // Call once at page load
wM.addListener(watchMedia) // Listen for state changes

<div id="topbanners1-4-a" style="display: inline-block; white-space: nowrap">
  <img id="front-end-top" src="http://placehold.it/300/f00" style="width: 25%; margin-bottom: 10px" alt="" />
  <img id="front-end-top" src="http://placehold.it/300/0f0" style="width: 25%; margin-bottom: 10px" alt="" />
  <a href="https://www.mysite.co.uk/Silentnight-Divan-Beds-and-Mattresses-c99">
    <img id="front-end-top" src="http://placehold.it/300/00f" style="width: 25%; margin-bottom: 10px" alt="" />
  </a>
  <img id="front-end-top" src="http://placehold.it/300/f0f" style="width: 25%; margin-bottom: 10px" alt="" />
</div>

​

或者CSS media query和外部CSS规则。

​

#topbanners1-4-a {
  display: inline-block;
  white-space: nowrap;
}

#topbanners1-4-a img {
  width: calc(25% - 5px);
}

@media screen and (max-width: 700px) {
  #topbanners1-4-a {
    white-space: normal;
  }
  #topbanners1-4-a img {
    width: calc(50% - 10px);
    margin-bottom: 10px;
  }
  #topbanners1-4-a > *:nth-child(even) {
    margin-left: 10px;
  }
}

<div id="topbanners1-4-a">
  <img id="front-end-top" src="http://placehold.it/300/f00" alt="" />
  <img id="front-end-top" src="http://placehold.it/300/0f0" alt="" />
  <a href="https://www.mysite.co.uk/Silentnight-Divan-Beds-and-Mattresses-c99">
    <img id="front-end-top" src="http://placehold.it/300/00f" alt="" />
  </a>
  <img id="front-end-top" src="http://placehold.it/300/f0f" alt="" />
</div>

​

Answer 2

你有没有尝试过使用CSS媒体查询？

@media (max-width: 500px) {

    #topbanners1-4-a img {
        width: 50%;
    }

}