一般媒体查询的问题。没有结果答案

【问题标题】：Problems with media queries in genreal. No results一般媒体查询的问题。没有结果
【发布时间】：2013-12-10 09:06:55
【问题描述】：

我似乎无法让任何媒体查询工作。我不知道为什么。我尝试了一百万种不同的东西。它只是行不通。

CSS：

@media screen and (max-device-width: 320px) {
    #sidebar {
        display: none !important;
    }
}

HTML：

<body>
<div id="sidebar">
  <ul>
    <li><a href="about.html">About</a></li>
    <li><a class="active" href="projects.html">Projects</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  <div id="side-footer">
    <p><a href="mailto:business@darmisdigitaldesigns.net?subject=Website">Contact Webmaster</a><br />&copy; DDD 2012-2014</p>
  </div>
</div>
<div id="content">
  <div id="content-wrap">
    <h1>Projects</h1>
    <hr>
  </div>
</div>

元标记：

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

【问题讨论】：

你是否在头部添加了meta-viewport？
您是否尝试过查看“设备”（即“手机、平板电脑”）上的输出？如果您在台式机/笔记本电脑上查看它，则“max-device'width”将不起作用，出于测试目的将其替换为“max-width”...
参考这个问题，stackoverflow.com/questions/19945658/…。
我的视口标签如下<meta name="viewport" content="width=device-width,initial-scale=1">
最后说明：我使用 Adobe Device Central 对 max-device-width 进行了测试，并且成功了。还让max-width 在浏览器中工作。

标签： html css responsive-design

【解决方案1】：

查看fiddle

max-width 是目标显示区域的宽度，例如浏览器

max-device-width是设备整个渲染区域的宽度，即实际设备屏幕

在fiddle中使用这个css规则的正确方法是

@media screen and  (max-width: 320px) {
    #sidebar {
        display: none !important;
    }
}

【讨论】：