媒体查询未触发

Question

目标

目标是使网格系统每行的框数量根据屏幕尺寸变化。这是一个例子

Screen Size   Boxes   Percent Width
1250px          3           33.3
750px           2           50
500px           1           100

当前进度

我已经创建了网格系统和媒体查询

/* Max Width 1250px */
@media screen and (max-width: 1250px) {
    .boxes {
        width: 33.3%;
    }
}

/* Max Width 750px */
@media screen and (max-width: 750px) { 
    .boxes {
        width: 50%;
    }
}

/* Max Width 500px */
@media screen and (max-width: 500px) { 
    .boxes {
        width: 100%;
    }
}

问题

我目前有在 750px 和 500px 下工作的媒体查询，但它会跳过 1250px。不确定 750px 和 1250px 之间有什么区别？为什么它不起作用？

JSFiddle - https://jsfiddle.net/6k2Lkm2f/1/

Answer 1

我以前遇到过类似的问题。

您应该同时使用 min-width 和 max-width 分别设置下限和上限。

你的前两个也是多余的。两者都将 .boxes class 的宽度设为 50%。最好合二为一，兼顾双方的观点

/* Max Width 1250px */
@media only screen and (min-width: 501px) and (max-width: 1250px) {
    .boxes {
        width: 50%;
    }
}

/* Max Width 500px */
@media only screen and (max-width: 500px) { 
    .boxes {
        width: 100%;
    }
}

使用上述语法是防止混淆的好方法。

编辑：媒体查询仅适用于 ie9 及更高版本。如果您使用的是旧版浏览器，以上内容将无法使用。

第二次编辑：看起来在媒体查询中您需要在类型前添加 only。例如

@media only screen 而不是 @media screen

媒体查询未触发

Media Query Not Firing

html

css

media-queries

responsive-design