html - 为什么只有一个媒体查询不起作用？

Question

我正在为一个网站使用多个媒体查询，而最大的 (min-width:1201px) 是唯一一个未实现任何更改的媒体查询。以下是我使用过的查询，完全按照我在 CSS 中看到的方式输入，并且顺序如下:

@media only screen and (min-width: 320px) {}

@media only screen and (min-width:480px) {}

@media only screen (min-width: 768px) and (max-width: 991px) {}

@media only screen (min-width: 992px) and (max-width: 1200px) {}

@media screen (min-width: 1201px) {}

我在 index.html 的头部包含了 meta 标签:

<meta name="viewport" content="width=device-width, initial-scale=1">

我发现的另一件奇怪的事情是，在 index.html 中，我为背景封面照片应用了具有不同大小图片的媒体查询，并且我在那里使用的 min-width: 1200 有效。

我真的希望你们中的一个能指出我遗漏了什么。

Answer 1

并非所有这些查询都有效。我认为这就是您所追求的。

@media only screen and (min-width: 320px) and (max-width: 479px) {}
@media only screen and (min-width:480px) and (max-width: 767px) {}
@media only screen and (min-width: 768px) and (max-width: 991px) {}
@media only screen and (min-width: 992px) and (max-width: 1200px) {}
@media screen and (min-width: 1201px) {}

在此处查看实际效果:https://jsfiddle.net/e7wdmca4/1/