媒体屏幕分辨率

Question

我在css中使用以下内容：

@media screen and (max-width: 400px){
    .details-container {width: 121%;}
}

@media screen and (max-width: 640px){
     .details-container {width: 201%;}
}

如果我尝试400px以下的分辨率，需要640px css作为参考，为什么？

Answer 1

400px的屏幕适合您的查询，这意味着它将获得两个值，但最后一个设置将按照CSS级联规则占优势。

您可以翻转查询的顺序或在第二个中指定最小宽度

@media screen and (max-width: 400px){
    .details-container {width: 121%;}
}

@media screen and (min-width: 401px) and (max-width: 640px){
     .details-container {width: 201%;}
}