html - 外部 CSS 文件中的媒体查询

Question

我正在修改我的 CSS3/HTML5 网站以使用不同的中间查询。

站点页面位于根目录中。 CSS 文件位于根目录中名为 css 的文件夹中。

在我页面的 HEAD 标签中，我有一个默认内容的 CSS 文件，然后我在名为 ipad.css 的外部 CSS 文件中有另一个用于 iPad 的文件

当我在 Google Chrome 的开发者工具中时，它似乎没有应用 ipad.css 文件中的规则。我知道这一点是因为我想更改元素的文本大小并且它没有改变。什么都没有发生。

这是我在 HEAD 标签中的内容:

<link rel="stylesheet" type="text/css" href="css/default.css" title="Default Styles">
<link rel="stylesheet" type="text/css" href="css/ipad.css" media="screen and (max-device-width: 768px)" title="iPad Styles">

根据 Google Chrome 开发者工具，iPad 宽度为 768px。我在链接标签中引用了这个。欢迎任何想法或建议。

Answer 1

使用 max-width: 768px 而不是 max-device-width: 768px。

此外，请记住指定一个 viewport meta tag在您的 html 的头部部分。

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

此外，您可能还想检查一下

What is the difference between max-device-width and max-width for mobile web?

此外，请记住，您不是针对设备，而是针对分辨率。

问题的另一个可能来源可能是您在 ipad.css 中使用了不太具体的选择器。不要忘记 default.css 中的样式也可用于低于 769px 的分辨率!

要对此进行测试，请将此 css 规则放在 ipad.css 的最顶部:

* { display: none !important; }

如果您的网站随后消失，您的样式表将加载并应用。