Question

我正在使用同位素与砖石流体柱宽和排水沟，它似乎运作良好。我为响应式内容编写了一些媒体查询，如果我调整窗口大小（实际上我采用了我在媒体查询中写的正确值），桌面上的效果很好。我的问题是我无法理解为什么如果我用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%;
  }
}

同位素 - 砌体流体柱宽度和排水沟 - 媒体查询

1 个答案: