我正在学习有关媒体查询的教程。当我在Chrome/Firefox中打开HTML时，我得到一个空白页面，并且没有显示任何内容。但是，当我检查页面时，代码正常显示，我可以看到媒体查询的工作原理。我尝试调整媒体查询的最小宽度和最大宽度，但我使用的任何浏览器中仍然出现空白页。我已经在下面发布了教程中的原始 HTML。
<!DOCTYPE html>
<html>
<head>
<title>Beginners CSS - Chapter 8</title>
<style type="text/css">
* {
margin: 0px;
}
main {
margin: 10px auto;
width: 600px;
padding: 30px;
margin-top: 0px;
background-color: olive;
display: block;
}
@media screen and (max-width: 350px) {
main {
background-color: #88a5e0;
}
}
@media screen and (min-width: 600px) {
main {
background-color: red;
}
}
@media screen and (min-width: 800px) {
main {
background-image: url('images/Reeds-in-Wind-Cinemagraph.gif');
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 400px;
}
}
@media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #fff;
}
h1,
p {
display: none;
}
}
</style>
</head>
<body>
<main>
<h1>Media Queries</h1>
<p>Media allows you to make your pages to change to fit any device.</p>
</main>
</body>
</html>在右侧/左侧停靠栏上打开开发人员工具时，屏幕宽度会发生变化。因此，您看到的元素可能来自min-width 800px媒体查询。
最小宽度为 1000 像素的页面不是"空白页，不显示任何内容"。您可以从下面的代码中读取，您将background-color设置为白色，隐藏h1和p，并在min-width: 1000px时删除background-image。
@media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #fff;
}
h1,
p {
display: none;
}
}
页面不是空白的，根据您的代码 对于宽度超过 1000 像素的屏幕，您可以设置以下样式：
@media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #FFF;
}
h1, p {display: none;}
}
所以 H1 和 P1 元素不会显示，背景将是白色的， 如果调整窗口大小，则会发生其他媒体查询。 此外，通过打开开发人员工具，您可以调整窗口大小。