CSS媒体查询不显示答案

【问题标题】：css media queries not displayingCSS媒体查询不显示
【发布时间】：2017-01-05 13:19:13
【问题描述】：

我在头部有两个这样链接的样式表...

<link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="{% static '/mobile-style.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 8000px)" href="/style.css">

然后在我的工作表中：

style.css

body {color:blue;}

mobile-style.css

body {color:red}

但是当我加载页面时，我只看到 style.css 表，而从来没有看到 mobile-style.css 表，即使我在谷歌浏览器的网站管理员面板中加载它并将设备切换到带有小屏幕的东西。我尝试刷新删除缓存等，但没有成功。

我在这里做错了吗？

【问题讨论】：

你添加viewport meta标签了吗？
@vivekkupadhyay 我从来没有遇到任何文档说我必须添加它，但我确实在样式表之前添加了<meta name="viewport" content="width">，但没有运气
这可能是因为“视口”添加这个
第二个样式表适用于与第一个相同的情况，因为 800 像素的最大宽度也在 8000 像素的最大宽度范围内。所以你的第一个会立即被覆盖。

标签： html css mobile media-queries

【解决方案1】：

这里总是在 style.css 文件中应用 css。因为在这里你已经把媒体查询放在下面。

 @media(max-width: 800px){

  }
  @media(max-width: 8000px){

  }

这里style.css 文件媒体是(max-width: 8000px)。 mobile-style.css 总是如此，因为它是媒体 (max-width: 800px)。所以总是应用 style.css 文件 css 样式。

更新答案...
所以，试试这样的事情

<link rel="stylesheet" type="text/css" media="screen and (min-width: 799px)" href="mobile-style.css" >
<link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="style.css">

【讨论】：

谢谢，错过了我觉得很愚蠢

【解决方案2】：

<link rel="stylesheet"
 type="text/css"
  media="screen (max-width: 8000px)"
  href="/style.css">

我删除了 AND 并简单地添加了 media="screen (max-width:800px)" 它对我有用。谢谢

【讨论】：

为什么你用and开始句子？什么？