为什么我用Chrome与使用VSC的实时服务器打开html文件时，页面的行为会有所不同？

如何解决为什么我用Chrome与使用VSC的实时服务器打开html文件时，页面的行为会有所不同？

我开始对页面的标题进行编码，我正在使用媒体查询在移动视图中显示汉堡菜单，而在较大的视图中，我希望连续显示导航栏并隐藏汉堡菜单。

但是，根据打开页面的方式，我会看到不同的内容：

使用Chrome打开html文件>可以正确显示所有内容，并且媒体查询可以正常工作
使用Chrome打开html文件并检查页面>如果我缩小页面大小，它将一直显示导航栏，并且不会显示汉堡菜单
将实时服务器与VSC一起使用，是否检查页面：我始终会看到汉堡菜单，并且在调整页面大小且导航栏不显示时，媒体查询不会运行。

我重新安装了实时服务器，但问题仍然存在。

可能是什么问题？

@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@300&family=Roboto:wght@100&family=Rochester&display=swap");

* {
  margin: 0;
}

html,body {
  font-family: Roboto,sans-serif;
  font-size: 11px;
}
/*** HEADER ***/

header {
  background: #1d3545;
  height: 150px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hamburger {
  display: flex;
  width: 50px;
  height: 70px;
  flex-direction: column;
  justify-content: space-evenly;
  margin-left: 30px;
  padding: 5px;
  border-radius: 20px;
}

.hamburger div {
  width: 50px;
  height: 10px;
  background: #fff;
}

.logo {
  color: #fdf1f1;
  font-family: Rochester;
  font-size: 70px;
  margin-right: 30px;
  padding: 5px;
}

nav {
  display: none;
}

nav ul {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  list-style: none;
  color: #fdf1f1;
  font-size: 20px;
}

.nav ul li {
  padding: 5px;
}

/*** MEDIA QUERIES ***/

@media (min-width: 650px) {
  header {
    justify-content: space-between;
  }

  .hamburger {
    display: none;
  }

  nav {
    display: inline-block;
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Project 2: The News Site - Version 3</title>
    <link rel="stylesheet" href="./style.css" />
    <!-- dont forget the meta tag for responsiveness -->
  </head>
  <body>
    <header>
      <!-- Some kind of logo and navbar -->
            <div class="hamburger">
                <div></div>
                <div></div>
                <div></div>
            </div>  
                <h1 class="logo">Succulento World
                </h1>
            

            <nav>
              <ul>
                <li>About</li>
                <li>Gallery</li>
                <li>Contact</li>
              </ul>
            </nav>

      </header>
   

    <section class="big-news">
      <!-- The big news content -->
    </section>

    <section class="">
      <!-- The other news  -->
    </section>
  </body>
</html>

为什么我用Chrome与使用VSC的实时服务器打开html文件时，页面的行为会有所不同？

如何解决为什么我用Chrome与使用VSC的实时服务器打开html文件时，页面的行为会有所不同？

相关推荐