Question

我创建了一个带有2x2照片网格的网页。当屏幕宽度小于1300像素时，我使用媒体查询将照片转换为1x4网格。问题是，当我最小化屏幕时，右上方的一张照片会消失。它发生在600px和1300px之间。

以下是codepen：http://codepen.io/queenlizo/full/bEvQRJ/

这些是有问题的媒体查询：

.center-row > div > p,
    .center-row > div > ul {
    display: block;
 }

.center-row > div {
  height:100%;
  width:100%;
  display: table-cell;
  border:0;
  color:#fff;
  vertical-align: middle;
  }

  .center-row > div:hover > p,
  .center-row > div:hover > ul,
  .center-row > div:hover > h2 {
    display: block;
    padding: 0 0 0 0;
    opacity: 1;
  }
}
@media all and (max-width: 1300px)  {

  .center-row > div {
       height:100%;
       width:100%;
       display: table-cell;
       border: 0;
       color:#fff;
       vertical-align: middle;
   }
}

非常感谢任何帮助！

谢谢！

Answer 1

您是否试图摆脱@media中的all and。全部都是默认值，因为您没有加入任何内容，因此不需要and。

应写如下： @media (max-width: 1300px)

希望这有帮助。

Answer 2

在.center-row删除：

display: table-row;

使用媒体查询最小化屏幕时照片消失

2 个答案: