Question

我正在修改我的CSS3 / HTML5网站以使用不同的Medial Queries。

网站页面位于Root目录中。 CSS文件位于根目录中名为css。

的文件夹中

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

当我使用谷歌浏览器中的开发者工具时，它似乎不会在ipad.css文件中应用规则。我知道这是因为我想要改变元素的文本大小并且它没有改变。什么也没发生。

这就是我在HEAD标签中的含义：

＆＃13;

<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">

＆＃13;

根据谷歌Chrome开发者工具，iPad宽度为768像素。我在链接标记中引用了这个。任何想法或建议都欢迎。

Answer 1

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

另外，请记住在html的head部分指定viewport meta tag。

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

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

Answer 2

我也尝试了最大宽度，并且样式不适用。即使我更改div类（p标签）中文本的字体颜色，也不会发生任何事情。

作为一个例子，我有一个名为 banner-textoverlay 的div类，因此，在我的ipad.css文件中，我编写了以下内容，看它是否会改变文本颜色，根本没有任何反应

.banner-textoverlay p {
    font-color:#000000;
}

外部CSS文件中的媒体查询

2 个答案: