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

标签 html css media-queries

我有以下适用于移动设备的媒体查询,但默认情况下不适用于桌面:

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

最佳答案

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

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

320px example

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

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

请注意,480 像素只是一般智能手机的最大宽度,并非适用于所有智能手机的准则。


为了展示这一点,我创建了 this JSFiddle demo .

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

关于html - 媒体查询在桌面上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18750220/

相关文章:

javascript - 如何将html中span的值传递给其他页面

html - Bootstrap 表的功能区

html - 中间栏溢出

ios - 基于 Em 的 CSS 媒体查询在 Ios Mobile Safari 上显示的分辨率低于预期

javascript - 为什么我在 bootstrap 模式中的点击事件触发不止一次

javascript - "event.originalEvent.clipboardData.getData"是什么意思?

javascript - 可折叠列表 - 使用多行显示所有标题

javascript - 按需加载 javascript 和 css 文件

css - IE9 在加载非外部 CSS 时加载了错误的媒体查询信息

css - Internet Explorer 11 中的媒体查询阅读最后一篇