我将 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%;
}
}
有什么想法吗? 非常感谢
最佳答案
通常您使用 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%;
}
}
关于jquery - 同位素 - 砌体流体 columnWidth 和 gutter - 媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33609532/