css - 带媒体屏幕的分辨率

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%;}
}