为什么我的媒体查询中只有一个不起作用？

Question

我正在为网站使用多个媒体查询，最大的（最小宽度：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) {}

我已将meta标记包含在index.html的头部：

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

我发现奇怪的另一件事是在index.html中我已经为背景封面照片应用了不同尺寸图片的媒体查询，而我在那里使用的最小宽度：1200工作。

我真的希望你们中的一个人能够找到我所缺少的东西。

Answer 1

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

./node_modules

在此处查看此操作：https://jsfiddle.net/e7wdmca4/1/

Answer 2

你错过了＆＃34;和＆＃34;在上一个查询中： @media screen和（min-width：1201px）{}