jquery - 同位素 - 砌体流体 columnWidth 和 gutter - 媒体查询

Question

我将 Isotope 与砌体流体 columnWidth 和 gutter 一起使用，看起来效果很好。我为响应性内容编写了一些媒体查询，如果我调整窗口大小(实际上采用我在媒体查询中编写的正确值)，在桌面上效果很好。我的问题是，我不明白为什么如果我用 iphone、ios 模拟器或只是在 chrome 中“切换设备模式”打开这个页面，它不会对最小的设备进行最后的媒体查询。

我做了一个codepen，希望有人能帮我解决。 http://codepen.io/mp1985/pen/OyBdwE

@media only screen and (min-width: 320px) {
  .grid-item, .grid-sizer {
    width: 100%;
  }
  .grid-item--width2 {
    width: 100%;
  }
}

@media only screen and (min-width: 500px) {
  .grid-item, .grid-sizer {
    width: 48.5%;
  }
  .grid-item--width2 {
    width: 100%;
  }
}

有什么想法吗？非常感谢

Answer 1

通常您使用 max-width 而不是 min-width 来定位您的断点，对从最小断点向上移动的每个额外断点使用 min-width。此外，您还应该研究针对不同设备和方向推荐的断点大小。

@media only screen and (min-width: 301px) and (max-width: 500px) {
  .grid-item, .grid-sizer {
    width: 48.5%;
  }
  .grid-item--width2 {
    width: 100%;
  }
}

@media only screen and (max-width: 320px) {
  .grid-item, .grid-sizer {
    width: 100%;
  }
  .grid-item--width2 {
    width: 100%;
  }
}