媒体查询未根据屏幕尺寸检测到给定范围

Question

我正在研究网站的媒体查询。我几乎完成了其中的95％，没有任何问题。

当前，我无法解决一个问题，即我为378px大小的屏幕编写了CSS，但是当我检查响应时，它正在991px范围内检测到。 我附上它。

当我进入378px屏幕时，

你们能帮我解决问题吗？

Answer 1

您可以在代码下方使用媒体查询：

@media (max-width: 991px) {
    .example {background: blue;}
}

@media (min-width: 378px)  and (max-width: 479px) {
    .example {background: orange;}
}

@media (max-width: 378px) {
    .example {background: red;}
}

Answer 2

是的，您的媒体查询工作正常，但由于行号位置而无法获得输出。

我可以看到：

@media (max-width: 378px) // Line number showing mg.css:13

和

@media (max-width: 991px) // Line number showing mg.css:925

因此，当选择器优先级相同时，由于CSS控件从上到下读取并且两个媒体查询均处于活动状态，因此它只能在最后一行工作。

解决方案：

您可以通过两种方式克服这种情况：

a。。在378px代码之后添加991px代码。

b。。通过添加CSS优先级选择器，如下所示：

@media (max-width: 378px) {
    .anothers-selector .example {background: red;}
}