html - 媒体查询 css 文件未检测到

Question

我设计了一个模板，我希望它能够响应，所以我包含了一些媒体查询文件来实现它。但是 max-width: 500px 文件检测不正确。我真的不知道如何解决它。该网站在所有其他桌面屏幕分辨率下运行良好。我不知道为什么它在 500px 以下的屏幕分辨率下不起作用。我在那个 css 文件 (medium-tab) 中所做的就是将菜单容器的显示设置为无，并通过编写 display:block 来激活移动容器，这样其他菜单就会自动激活。我该如何解决这个问题？

 <link rel='stylesheet' media='screen and (max-width: 1024px)' href='css/medium-1024.css' />
        <link rel='stylesheet' media='screen and (max-width: 500px)'  href='css/medium-tab.css' />
        <link rel='stylesheet' media='screen and (min-width: 2559px)' href='css/medium-2560.css' />
        <link rel='stylesheet' media='screen and (min-width: 1367px)' href='css/medium-1400.css' />
        <link rel='stylesheet' media='screen and (max-width: 1366px)' href='css/medium-1366.css' />

Answer 1

试试这个方法来解决您的问题。将所有的 css 写在一个文件中，命名为“Style.css”或任何你想要的。

在 html 的 head 部分添加以下行

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

@media (max-width: 500px) {
 /*
  Write here the code you wrote in the style sheet of 500px.
 */
}

@media (min-width: 501px) and (max-width: 1024px) {
 /*
  Write here all the code of 1024px.
 */
}

你可以添加更多@media (min-width: previous-width + 1) and (max-width : next width)

总是按顺序去添加文件或添加媒体文件。当代码写在文件末尾附近时，请记住代码将被执行，上面编写的代码将被覆盖。

有时包含多个文件会导致一些问题。