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

When I use media query to link to multiple CSS files from an HTML link, only the full-size css file applies.

当我使用媒体查询从HTML链接链接到多个CSS文件时,只应用完整大小的CSS文件。

I am able to get the media queries to work successfully within one single CSS file using:

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

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

However, I want separate files for each media query. Here is my test code which does not work for me:

但是,我想为每个媒体查询单独的文件。这是我的测试代码,对我不起作用:

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

All the files are correctly named and saved within the same folder. Any help would be greatly appreciated!

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

1 个解决方案

#1

This is due to the order in which you are linking the CSS files.

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

You need the mobile.css classes to override the ones specified in stylesheet.css, so include it second.

您需要mobile.css类来覆盖stylesheet.css中指定的类,因此请将其包括在内。

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

#1