gpt4 book ai didi

html - @media 查询不适用于主样式表,将其链接为外部工作表

转载 作者:太空宇宙 更新时间:2023-11-04 12:53:47 25 4
gpt4 key购买 nike

我正在尝试压缩我的外部 css 媒体查询样式表和我的主要 css 样式表。

当我链接到外部样式表时,媒体查询正常工作。但是在我尝试将代码添加到我的主 css 样式表后,它不再有效。

我一直在查看教程并下载了一些文件,但我仍然感到困惑。

我通过这样链接到我的外部媒体查询 CSS 表:

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

这很好用。

这是我当前页面的标题:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Tester Page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel='stylesheet' type='text/css' href='css/style.css' media='all' />

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

</head>

这是外部 r_700 样式表中的代码:

body {
background-color:#00F;
background-image:none;
padding:0;
margin:0;
}

这是主要 style.css 工作表中的代码(我无法开始工作):

@media all and (min-width: 700px) {
body {
background-color:#00F;
background-image:none;
padding:0;
margin:0;
}
}

@media 是主样式表中的最后一行,所以我知道没有任何内容覆盖它。

我知道它必须是简单的东西,比如搞砸语法或类似的东西。我觉得我真的很愚蠢,我不能让这个愚蠢的东西工作。

有人介意帮帮我吗?谢谢。

最佳答案

我认为这是因为您在媒体查询中替换的代码与默认 CSS 中的代码完全相同:

默认:

body {
background-color:#00F;
background-image:none;
padding:0;
margin:0;
}

对比:

@media all and (min-width: 700px) {
body {
background-color:#00F;
background-image:none;
padding:0;
margin:0;
}
}

你没有改变任何东西,所以页面看起来是一样的......

关于html - @media 查询不适用于主样式表,将其链接为外部工作表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25982210/

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