媒体查询无法正常工作

Question

我正在尝试在我的一个网站上使用媒体查询，一开始它运行良好，但后来当我完成所有媒体查询部分网站设计时无法正常工作，这是我在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" />

添加所有这些后，只有带有 1440px 的最后一个媒体查询有效。这可能是什么原因？

Answer 1

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

Answer 2

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

@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 3

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

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

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

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

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

媒体查询无法正常工作

Media query not wokring properly

html

css

media-queries