Question

我一直在构建一个小型图像灯箱，我试图在屏幕大小为600px时使图像的宽度及其包含div的100％，但我的媒体查询由于某种原因不会执行。这与保证金底部是一个百分比有关吗？谢谢 https://jsfiddle.net/egL1offh/

@media screen and (max-width: 600px){
  .lightboxCenter{
    position: fixed;
    width: 100%;
    margin-bottom: 17.5%;
    margin-top: auto;
    top: 25%;
  }

  .lightboxCenter>img{
    position: fixed;
    width: 100%;
    margin-bottom: 17.5%;
    margin-top: auto;
    top: 25%;
  }

}

Answer 1

看到我在.lightboxCenter内找不到任何内容，即它是empty，这就是你在media query .lightboxCenter > img中声明的内容，所以它不起作用，当您选择child element时，它是empty div。 img tag位于.imageGallery内，因此您需要使用该image 100%来缩放max-width of 600px，如下所示，

@media screen and (max-width: 600px){
.imageGallery{
  width:100%;
  height:auto;
}
.imageGallery > img{
  width:100%;
}
}

margin-bottom媒体查询的百分比不起作用Jquery

1 个答案: