CSS媒体查询无法工作

Question

我一直在尝试在CSS文档中使用媒体查询，类似于以下内容：

```css @media only screen and (max-width: 600px) { /* 响应式样式 */ } ```

@media screen and (max-device-width: 480px) { /*css here*/}

但是在我的 iPhone 上测试时它却无法工作。我已经尝试过更改大小并使用纵向/横向特性，但仍然没有任何效果。我做错了什么？

- Alex Clinton

---

你也可以使用max-width，在250px的屏幕宽度下试试看。 - NaYaN

尝试将其切换为 max-width：http://jsfiddle.net/z7pN9/ - Darren

Answer 1

检查您是否具备以下条件

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

在您文档的头部

- David Taiaroa

---

没有视口标签，媒体查询将完全无法正常工作，因此这很重要。 - user31782

这应该是正确的答案。 - Braza

Answer 2

在HTML的头部链接CSS时，我总是称它为我的。

以下是我正在处理的当前页面的一个示例：

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 320px) and (max-device-width: 500px)" href="css/mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 501px)" href="css/main.css" />

这将选择在CSS文档加载完成之前就开始加载的CSS文档（减少HTTP请求的数量）。

如果在CSS文档中执行此操作，则通常应将max-device-width替换为max-width。

- mikedugan

---

如果没有很好的理由将它们分开，那么通过分离CSS文件来增加额外的HTTP请求是不值得的，最好将它们合并成一个。 - robooneus

这对我有用，我能够将其复制并只更改href属性。 - Alex Clinton

这实际上是处理媒体查询的最糟糕方法。每个设备都会下载所有媒体查询，即使它们目前不符合媒体查询要求。 - cimmanon

我看过 Webkit 团队的一篇文章，讲述了他们如何优先下载那些能立即应用的 CSS 文件，但是它们最终都会被下载。如果你旋转手持设备，你不想等待样式下载完成吧？同样适用于打印。 - cimmanon

我之前没有听说过...谢谢提供这个信息！ - mikedugan

Answer 3

这是一个示例媒体查询的CSS代码：

/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {
your css here
}

/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {
your css here
}
/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {
your css here
}

由于您没有提供代码，很难理解。但是人们常犯的错误是没有添加这些元数据。

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

- San

Answer 4

请使用"max-width"代替"max-device-width"，后者是按设备固定的。

- Shlomi Komemi

---

这对于最大宽度和最大设备宽度相同的手持设备并不重要。它只与桌面有关，因为浏览器无需最大化。 - cimmanon

这对我很有帮助，谢谢。不过我是在浏览器中查看的。我不明白为什么你不会使用它，我是说，在缩小的桌面屏幕上使用桌面大小的界面似乎不太高效，而你可以同时使用max-width。 - Jackie

Answer 5

@media only screen and (min-width : 480px) {

}

在Android和iPhone上，它似乎运行良好。

- Parfait

Answer 6

我不确定，但我认为 iPhone 的 max-device-width 是 640 像素。你可以试试。

- Romain Braun