html - 两个媒体查询混合使用相同的声明，除了一个是 ipad，另一个是桌面

Question

我有两个媒体查询，它们都被用在元素符号列表 li 标签中。问题是他们清除了每个正在完成的第 nth-child(2n+1) 和 nth-child(3n+1) 但在 chrome 设备 View 中调试时两者都在同一页面上使用。所以网格是 flex 的，每 2n+1 和每 3n+1 断裂。我尝试重新排序查询，但仍然没有得到我想要的结果。这发生在纵向 View 中。

@media only screen
and (min-width: 768px)
and (max-width: 1024px) {
    #products-list li:nth-child(3n+1) {     
        clear: left;
    }   
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { 

    #products-list li:nth-child(2n+1) {     
        clear: left;
    }   
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { 

    #products-list li:nth-child(3n+1) {     
        clear: left ;
    }   
}

Answer 1

让我们分析一下您的三个独立代码块的作用。

第一个 block (匹配portrait和landscape):清除3n+1。

第二 block (仅匹配portrait):清除2n+1。

第三 block (仅匹配landscape):清除3n+1。

如果您注意到，第一个代码块已经完成了第三个代码块的所有工作，因为它的条件匹配所有 portrait 和 landscape 方向，从而产生了不希望的结果。

为了防止执行重叠，您可以在此处明确说明此代码具体适用于哪些元素。您也可以嵌套媒体查询。

@media only screen
and (min-width: 768px)
and (max-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
    @media only screen and (orientation : portrait){
        #products-list li:nth-child(2n+1) {     
            clear: left;
        }
    }
    @media only screen and (orientation : landscape){
        #products-list li:nth-child(3n+1) {     
            clear: left;
        }
    }
}

另一种更简单但体积更大的方法是删除第一个代码块，只留下以下代码:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { 

    #products-list li:nth-child(2n+1) {     
        clear: left;
    }   
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { 

    #products-list li:nth-child(3n+1) {     
        clear: left ;
    }   
}