下面是我的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
但在编写时接受它。
答案 0 :(得分:0)
我检查了您在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>