媒体查询在桌面上不起作用答案

【问题标题】：Media Queries don't work on desktop媒体查询在桌面上不起作用
【发布时间】：2013-09-11 20:03:38
【问题描述】：

我有以下可在移动设备上使用的媒体查询，但默认设置不适用于桌面：

@media (min-width:481px) {
.header-section { width: auto; }
.search-block { display:none; }
}
@media (min-width:320px) {
.header-section { width: auto; }
.search-block { display:none; }
}

这些适用于手机，但是当我在桌面上查看时，显示在下方且不在任何媒体查询下的默认 CSS 不会启动。在我的谷歌检查器中，我可以看到这些规则的 media="all" 但它仍然无法正常工作并应用适用于移动设备的媒体查询。有什么想法吗？

.search-block {
width: 500px;
float: left;
margin-top: 5px;
margin-left: 30px;
}

【问题讨论】：

这里的重要区别是：您使用的浏览器和查看页面的分辨率。移动浏览器与桌面浏览器不同，即使它们都是“Chrome”（例如）。要确定某个功能的浏览器兼容性，我建议使用：caniuse.com。此外，您可能的意思是使用max-width 而不是min-width。使用min-width 意味着任何大于提供值的东西都将使用该媒体查询（除非另一个覆盖它）。
您确实意识到您的桌面浏览器几乎肯定至少有 320 像素宽，对吧？

标签： html css media-queries

【解决方案1】：

在指定仅 (min-width:320px) 作为媒体功能时，您将定位所有宽度大于 320 像素的媒体类型。这意味着除非您的桌面浏览器的宽度小于 320 像素，否则将应用此样式。

为了演示 320 像素的外观，这里有一个 320x320 占位符图片。如果您的浏览器无法完全显示此图像，您的媒体查询将始终生效：

如果您只想定位智能手机（宽度大于 320 像素），您需要在当前查询中添加 max-width 媒体功能，以防止将样式应用于宽度超过 480 像素的媒体类型：

@media (min-width:320px) and (max-width:480px) {
    .header-section { width: auto; }
    .search-block { display:none; }
}

请注意，480 像素只是一般智能手机的最大宽度，并不是所有智能手机的指南。

为了展示这一点，我创建了this JSFiddle demo。

在这个演示中，我添加了两个分隔符，example1 和 example2。 example1 仅包含在 min-width 媒体查询中，example2 包含在 max-width 查询中。只要 JSFiddle 的结果框架的宽度不在 100px 和 200px 之间，example2 将始终为绿色。另一方面，example1 将始终为红色，除非框架的宽度小于 100 像素。

【讨论】：

【解决方案2】：

@media 查询的顺序在你的 CSS 中很重要

这对我有帮助为最小的显示器制作角色其次是下一个最大的显示器依此类推，直到您最后一次查询最大屏幕

示例：

.your-class{
  width: 50%
}
@media (min-width: 480px){
  .your-class{
    width: 33%
  }
}
@media (min-width: 768px){
  .your-class{
    width: 25%
  }
}

如果您更喜欢使用max-width，则将屏幕从最大到最小的顺序颠倒

【讨论】：