CSS中的媒体查询条件

Question

我已经为3个不同的维度编写了媒体查询。初始样式为320px宽度，另外3个查询为

1. 320px及以上
2. 768px

3. 1,024像素x

   css适用于初始尺寸为320px，320px n，高于nad 768px。但是1024px css没有应用。

这是我的css查询

@media (min-width: 320px) {
For above 320px 
}
@media (min-width: 1024px) {
For 1024px; this is not applying
}
@media (min-width: 768px) {
for 760px
}

Answer 1

第三个媒体查询中的规则总是覆盖第二个。

您需要交换最后两个的顺序，以便1024px在适用时覆盖768px。

Answer 2

您想尝试按递减宽度顺序排列。例如：

@media (min-width: 320px) {
For above 320px 
}

@media (min-width: 768px) {
for 760px
}

@media (min-width: 1024px) {
For 1024px; this is not applying
}

CASCADING样式表从上到下读取。