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类宽度为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

媒体查询未触发

1 个答案: