Question

我设计了一个模板，我希望它能够响应，所以我提供了一些媒体查询文件来实现它。但是最大宽度：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只用一个文件名写为＆＃34; Style.css＆＃34;或者你想要什么。

在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）和（max-width：next width）

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

包含多个文件的某些时间会导致一些问题。

Answer 2

您是否设置了视口？

<meta name="viewport" content="width=device-width" />

Answer 3

请按顺序使用这些css。 media-tab.css终于来了。

Answer 4

由于您尚未同时设置min和max屏幕尺寸，但只有1个屏幕尺寸，因此您调用CSS的顺序非常重要

所以，让我们分解一下当你按此顺序打电话时发生的事情：

<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' />

=＆gt; screen and (max-width: 1024px)已加载... yeye - 这将适用于分辨率＆lt; 500px井

=＆gt; screen and (max-width: 500px)现在已加载，因此高于500px将会被这个... 垃圾覆盖，从未想过这个

=＆gt; screen and (min-width: 2559px)现已加载，很棒，我们现在将使用此CSS处理＆gt; 2599px !!

=＆gt; screen and (min-width: 1367px)现在已加载，该死的，我上面的CSS（ for 2559px ）刚刚结束了这个CSS也涵盖了＆gt; 2599px ..（ min-width：2599px意味着最小宽度也是1367px !! ）

=＆gt; screen and (max-width: 1366px)现在已加载，所有地狱都会松动，因为这会覆盖布局的所有屏幕宽度＆lt; 1367px

解决方案：

=＆gt; 使用min和max格式：

@media (min-width: 768px) and (max-width: 1024px) {
    /*
     styles here
    */

  }

在你的布局媒体查询CSS，OR

=＆gt; 如果您理解上述说明，请重新调整调用媒体查询CSS顺序!! ：）

媒体查询css文件未检测到

4 个答案: