Question

我正在尝试压缩我的外部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是主样式表中最后一行的，所以我知道没有什么是在写它。

我知道它必须是简单的东西，比如搞砸语法或类似的东西。我真的很愚蠢，我无法让这个愚蠢的事情发挥作用。

有人介意帮助我吗？感谢。

Answer 1

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

默认值：

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

VS

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

您没有更改任何内容，因此页面看起来一样......

@media查询不能与主样式表一起使用，在外部工作表的情况下链接到它

1 个答案: