Question

当我使用媒体查询链接到HTML链接中的多个CSS文件时，只应用全尺寸css文件。

我可以使用以下方法让媒体查询在一个CSS文件中成功运行：

@media screen and (max-width: 700px) {
body {
    /* style changes */
}

但是，我希望每个媒体查询都有单独的文件。这是我的测试代码，对我不起作用：

的index.html

<head>
    <meta name='viewport' content='width=device-width, initial-scale=1' />
    <link rel='stylesheet' media='screen and (max-width: 700px)' href='mobile.css' />
    <link rel='stylesheet'  href='stylesheet.css' />   
</head>

<body>
</body>

mobile.css

body {
    background-color:red;
}

stylesheet.css中

body {
    background-color:blue;
}

所有文件都已正确命名并保存在同一文件夹中。任何帮助将不胜感激！

Answer 1

这是由于您链接CSS文件的顺序。

您需要mobile.css类来覆盖stylesheet.css中指定的类，因此请将其包含在第二位。

<link rel='stylesheet'  href='stylesheet.css' />  
<link rel='stylesheet' media='screen and (max-width: 700px)' href='mobile.css' />

HTML链接中的媒体查询未链接到单独的CSS文件

1 个答案: