Question

下面是我的head标记中的脚本。 min-width:500正常工作，但是立即下一个查询max-width:499px似乎不起作用，我在有和没有screen and的情况下都尝试过，甚至将其添加到styles.css样式表中均无效。我只是在屏幕上尝试，它应该可以工作。有人可以发现我在做什么错吗？

<meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            h2 {
                color: orangered;
                text-align: center;
            }
            
            @media screen and (min-width: 500px) {
                body{
                    color:greenyellow;
                    background-color: black;
                }
            }

            @media screen and (max-width: 499px) {
                body {
                    color:pink;
                    background-color: navy;
                }
            }
        </style>
        <link rel = "stylesheet" href = "styles.css">

谁能说出我的VSCode为什么无法预测mid-width或max-width但在编写时接受它。

Answer 1

我检查了您在VS Code中的代码，它可以很好地处理背景颜色，但它不会更改文本的颜色（H2标签），我认为VS Code没问题，您可以这样做来更改文本颜色。

在编写媒体查询时，您正在更改正文中的背景颜色和文本，但是如果您使用的是h2标签，那么它将无法正常工作，因此您应该为h2编写特定的代码

尝试下面的代码。...

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        h2 {
            color: orangered;
            text-align: center;
        }
        @media screen and (min-width: 500px) {
            h2 {
                color: green;
            }
            body {
                background-color: black;
            }
        }
        @media screen and (max-width: 499px) {
            h2 {
                color: pink;
            }
            body {
                background-color: navy;
            }
        }
    </style>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h2>TechWithVP</h2>
    Some other text
</body>

</html>

多个CSS媒体查询未显示任何结果

1 个答案: