0

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

@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;
}
4

2 回答 2

1

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

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

320 像素示例

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

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

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

为了展示这一点，我创建了这个 JSFiddle 演示。

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

于 2013-10-12T13:10:38.677 回答
0

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

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

例子：

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

如果您更喜欢将max-width顺序从最大屏幕反转到最小屏幕

于 2015-05-08T15:23:00.027 回答