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

Question

我有以下媒体查询可在移动设备上运行，但默认设置无法在桌面上运行：

@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而不是任何媒体查询下的默认CSS都没有启动。在我的Google检查器中，我可以看到media =＆＃34; all＆＃34 ;对于这些规则，但它仍然无法运行并应用适用于移动设备的媒体查询。有什么想法吗？

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

Answer 1

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

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

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

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

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

---

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

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

Answer 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，那么将订单从最大屏幕反转为最小