Min-width和Max-width CSS媒体查询

Question

<link href="css/mobile-large.css" media="all and (min-width: 481px) and (max-width: 760px)" rel="stylesheet" type="text/css" />

这一行代码应该会在使用分辨率为720像素的三星Galaxy Nexus手机时加载样式表"mobile-large.css"，但实际上没有加载。造成这种情况的原因是什么？如何解决？

同时我使用了以下代码：

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

- LuckyLuke

Answer 1

也许你需要定义device-width而不是简单的宽度。写成这样：

<link href="css/mobile-large.css" media="all and (min-device-width: 481px) and (max-device-width: 760px)" rel="stylesheet" type="text/css" />

- sandeep

---

可以运行，但是为什么？当浏览器窗口大小等于屏幕大小时，设备宽度和宽度不应该同样起作用吗？请查看我的更新问题，在那里我声明使用了meta标签viewport。 - LuckyLuke

为什么 iPhone 4 和 iPhone 3G 的尺寸相同？它们使用相同的 CSS，但 iPhone 4 像素翻了一倍？ - LuckyLuke

Answer 2

我认为你也可以从查询字符串中删除 "all and"。

- Ettiene Grobler