Question

我正在尝试在我的一个网站上使用媒体查询，一开始它运行良好，但后来当我完成所有媒体查询部分网站设计无法正常工作时，这是我在{{中使用的媒体查询1}}：

style.css

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

@media screen and (max-width: 375px) {}

@media screen and (max-width:1920px) {}

在@media screen and (max-width:1440px) {}档案中：

intex.html

添加完所有内容后，只有<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />的最后一个媒体查询正在运行。可能的原因是什么？

Answer 1

尝试使用下面的媒体查询，即准确指定要应用的媒体查询。

@media screen and (max-width: 375px) {}

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

@media screen and (min-width: 769px) and (max-width:1440px) {}

@media screen and (min-width: 1441px) and (max-width:1920px) {}

Answer 2

我建议按顺序使用媒体查询，如下所示。它会起作用。

@media screen and (max-width:1440px) {}

@media screen and (max-width:1920px) {}

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

@media screen and (max-width: 375px) {}

Answer 3

您可能错过了关闭媒体查询的一些括号{}。检查您是否已关闭所有媒体查询..

媒体查询无法正常进行

3 个答案: