多个media queries仅部分生效：仅1366px媒体查询生效问题求助

你写的媒体查询顺序不符合CSS优先级规则：

• CSS 同选择器优先级下，后定义的样式会覆盖前定义的样式
• 你使用的是max-width媒体查询条件，任意宽度≤1366px的设备，会同时命中三个max-width的判断规则
• 你将max-width:1366px的规则放在了所有媒体查询的最后，它的样式会直接覆盖前面宽度更小的媒体查询规则，所以永远只有这一条生效

调整媒体查询的排列顺序，按照max-width数值从大到小排列，保证宽度越小的媒体查询规则越靠后，命中时可以覆盖前面的大宽度规则。

修复后的代码如下：

.itemListContainer {
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 63%;
    margin: 0 auto;
}
/* APPLYING MEDIA QUERIES */
@media (max-width: 1366px) {
    .itemListContainer {
        grid-template-columns: 1fr 1fr 1fr;
        background-color: red;
        width: 80%;
    }
}
@media (max-width: 1024px) {
    .itemListContainer {
        grid-template-columns: 1fr 1fr;
        background-color: blue;
        width: 90%;
    }
}
@media (max-width: 768px) {
    .itemListContainer {
        grid-template-columns: 1fr;
        background-color: green;
        width: 100%;
    }
}

调整顺序后：

• 宽度>1366px时，走默认样式，4列布局
• 宽度≤1366px且>1024px时，命中1366规则，3列红色背景
• 宽度≤1024px且>768px时，命中1024规则，2列蓝色背景，覆盖前面的1366规则
• 宽度≤768px时，命中768规则，1列绿色背景，覆盖前面的所有媒体查询规则

内容的提问来源于stack exchange，提问作者STUCKED