CSS中的媒体查询条件

Question

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

1. 320px 及以上

2. 768 像素

3. 1024 像素

   对于初始尺寸 320 像素、320 像素 n 和 768 像素以上的 css 非常有效。但 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 样式表从上到下读取。