媒体查询 css 文件未检测到答案

【问题标题】：Media query css file not detecting媒体查询 css 文件未检测到
【发布时间】：2014-07-15 15:36:13
【问题描述】：

我设计了一个模板，我希望它具有响应性，因此我包含了一些媒体查询文件来实现它。但是 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' />

【问题讨论】：

不，但它是否必不可少，因为我看到其他一些媒体查询文件正在正确执行......

标签： html css

【解决方案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) 和 (max-width : next width)

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

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

【讨论】：

我做到了，但是菜单部分没有改变，其他部分改变了，但是由于某种原因菜单没有改变......
@user3491511 : 大声笑..我还在解释，你接受了答案...检查我的理解 order 加载 CSS 的逻辑！！ :D
@user2291845 ：+1 表示赞成，stackoverflow 术语...欢迎加入俱乐部！ :)
我在解释 +1 的意思。就像最后一个媒体（最大宽度：240）一样，您正在声明下一个具有（最大宽度：320）的@media，最佳实践是添加（最小宽度）和（最大宽度）与媒体。我们最后的最大宽度是 240，所以下一个最小宽度将是 241，就像这个媒体（最小宽度：241 像素）和（最大宽度：320）。
@user2291845 : 错误...包含min 和max 不是最佳实践，在某些情况下，样式表可能只需要>2500px 而不是>2000px ..所以我会在>25000px 中包含这种情况...这一切都基于您的布局计划和代码！！

【解决方案2】：

你设置了视口吗？

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

【讨论】：

不，但它是否必不可少，因为我看到其他一些媒体查询文件得到正确执行。
如果其他人工作，它不是必需的。 500 不是被 1366 覆盖了吗？

【解决方案3】：

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

【讨论】：

【解决方案4】：

由于您没有同时设置 min 和 max 屏幕尺寸，但只设置了其中的一种，因此调用 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' />

=> screen and (max-width: 1024px) 已加载 ...yeye - 这适用于分辨率

=> screen and (max-width: 500px) 已加载完毕，因此 500px 以上的内容将被此覆盖...废话，没想到

=> screen and (min-width: 2559px) 现已加载，太好了，我们现在将使用这个 CSS 处理 >2599px ！！

=> screen and (min-width: 1367px) 已加载完毕，该死的，我上面的 CSS（for 2559px）刚刚被这个 CSS 改写为它也覆盖了 >2599px。（min-width : 2599px 意味着 min-width 也是 1367px！！）

=> screen and (max-width: 1366px) 现在已加载，所有地狱都崩溃了，因为这会覆盖布局

解决方案：

=> 使用min 和max 格式：

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

  }

在你的布局媒体查询 CSS，或者

=>如果您理解了上面的解释，请重新调整调用媒体查询的 CSS 顺序！！ :)

【讨论】：