gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 08:51:18 28 4
gpt4 key购买 nike

当我使用媒体查询从一个 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>

移动.css

body {
background-color:red;
}

样式表.css

body {
background-color:blue;
}

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

最佳答案

这是因为您链接 CSS 文件的顺序。

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

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

关于html - HTML 链接中的媒体查询未链接到单独的 CSS 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27326891/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com