为什么 index.html 而不是 Index.html 会更改我的网页大小？

Question

/* STYLE SHEET FOR INDEX.HTML */


/* Overarching Style */

html {
  display: flex;
  /* STYLE REST OF SHEET ACCORDING TO FLEXBOX */
  max-width: 100vw;
  overflow-x: hidden;
  /* Hide horizontal scrollbar */
  overflow-y: scroll;
  /* Add vertical scrollbar */
  justify-content: center;
  font-size: 4vw;
  font-family: Garamond, Verdana, Tahoma, sans-serif, Helvetica, Geneva, Arial;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: url("Media/PexelsKyleRoxas.jpg") no-repeat fixed center center;
  background-size: cover;
  min-width: 100vw;
  min-height: 100vh;
  max-width: 100vw;
  margin: 0;
  color: black;
  /* Properties: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content */
  /* Background must have this order: -color, -image, -repeat, -attachment ^scroll or fixed^, -position */
  /* background: linear-gradient(#EEF7FC, #47AAE8 50%, #EEF7FC); /* light blue */
}


/* Site Banner */

header {
  padding: 1vw;
  margin: 0;
  max-width: 100vw;
  color: #E9F1F6;
  /* light grey */
  background: url("Media/Banner.jpg") no-repeat center;
  background-size: cover;
  /* alternative: contain */
}

h1 {
  font-weight: bold;
  text-align: center;
  margin: .5vw;
  font-family: "Brush Script MT", Didot, Montserrat, sans-serif;
}

.bannersubtitle {
  font-size: .8em;
}


/* Navigation bar */

nav.topnav {
  display: flex;
  justify-content: space-around;
  margin-bottom: 3vw;
  background-color: white;
  /* border-radius: 5px; */
  /* rounded corners */
}

nav.topnav a {
  color: black;
  text-align: center;
  padding: 2vw 3vw;
  text-decoration: none;
  font-size: 4vw;
}

nav.topnav a:not(.active) {
  color: grey;
}

nav.topnav a:hover:not(.active) {
  background-color: darkgrey;
}

nav.topnav a.active {
  color: slateblue;
  font-weight: bold;
}


/* Main Content */

.bigbox {
  display: flex;
  flex: 1;
  /* Pushes footer to bottom, along with body, min-height: 100vh */
  flex-direction: column;
  justify-content: center;
  padding: 0 2vw;
  margin-left: 2vw;
  margin-right: 2vw;
}

.littlebox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: .1vw solid slateblue;
  margin-bottom: 3vw;
  padding: 3vw;
  background: white;
}

.mainpost {
  color: black;
}

.previousposts {
  color: grey;
}

h2 {
  margin-top: 1vw;
  margin-bottom: 1vw;
}

h3,
.pvpostsubtitle {
  color: grey;
  font-weight: lighter;
  font-size: 3vw;
  margin-top: 1vw;
  margin-bottom: 1vw;
}

p {
  line-height: 6vw;
  margin-top: 1vw;
  margin-bottom: 1vw;
}

a {
  color: blue;
}

div.divimg {
  display: flex;
  justify-content: center;
}

img.bodyimage {
  max-width: 100%;
  height: auto;
  border: 0;
  margin-bottom: 2.5vw;
  /* width: 80vw; */
}

footer {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  height: 5vw;
  font-size: 4vw;
  margin-bottom: 2vw;
  color: white;
}


/* For devices 800px and larger: */

@media only screen and (min-width: 800px) {
  html {
    font-size: 3vw;
  }
  /* Main Content */
  .bigbox {
    padding: 0 2vw;
    max-width: 80vw;
    margin-left: auto;
    margin-right: auto;
  }
}


/* For devices 1000px and larger: */

@media only screen and (min-width: 1000px) {
  html {
    font-size: 2vw;
  }
}

<!DOCTYPE html>

<html lang="en-us">

<head>
  <meta name="keywords" content="First, webpage, learning" />
  <meta name="description" content="My first webpage." />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="index.css">
  <link rel="shortcut icon" type="image/x-icon" href="Media/favicon_io/favicon.ico">
  <title>Chasing Freedom</title>
</head>

<body>

  <header>
    <h1>Chasing Freedom</br>
      <span class="bannersubtitle">and setting fires</span></h1>
  </header>

  <nav class="topnav">
    <a href="AboutUs.html">About Us</a>
    <a href="index.html">About Us</a>
    <a href="Archives.html">Archives</a>
  </nav>

  <div class="bigbox">

    <div class="littlebox mainpost">

      <h2>About Us</h2>

      <p>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
        sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
      </p>

    </div>

  </div>

  <footer>
    Copyright &copy;2022. All Rights Reserved.
  </footer>

</body>

</html>

index.html page shown as over 1200px, rather than expected ~800px

carbon copy of that same page, no window resizing, shown as desired ~800px; only difference is upper or lowercase "I" in html file link. Does this only when file name and link are both uppercase.

我正在从头开始构建一个非常简单的博客式网站。我对几乎所有尺寸值都使用了“vw”，并且每个容器都使用了 flexbox。

问题：由于所有内容的大小都偏离了视口，视口大小的差异使我的页面呈现方式大不相同。尽管没有 window 调整大小，但我有开发工具说具有不同视口宽度的相同页面，因此由于我的媒体查询，呈现不同。

疑难解答：我尝试了重命名受影响的 index.html 页面以及它在代码中的 typed/linked 的不同组合：

1200px：文档名称为小写，link代码为小写
1200px：文档名称是小写，link代码中是大写
1200px: 文档名称为大写，代码中的link为小写
800px:文档名称大写，link代码中大写

代码的唯一区别是文档名称。所以不知何故，文档名称本身使视口变宽了……对吗？这是正常的，还是我做错了什么，将我的文件命名为大写 Index.html 会产生影响吗？（例如，托管网站要求着陆页为“index.html”）。

以上代码相关部分：

<nav class="topnav">
    <a href="AboutUs.html">About Us</a>
    <a href="index.html">About Us</a>
    <a href="Archives.html">Archives</a>
</nav>

Answer 1

首先，文档名称对您在文件中键入的内容没有任何影响。所以您可以使用 index.html 或 Index.html。但最好使用 index.html.

另一个好的做法是让所有 .html 文件都是小写的。我可以看到您的 css 文件的名称是 index.css。您可能应该将其更改为 styles.css 之类的内容，这是另一个好习惯。

在这里，您在媒体查询中使用 html: 2vw; 来更改所有字体大小。但它不会发生，因为 <html></html> 只是一个包装器。为此，您可以使用 * : 2vw; 选择所有标签或单独更改标签的 font-size。

为什么 index.html 而不是 Index.html 会更改我的网页大小？

Why does index.html, but not Index.html, change the size of my webpage?

html

css

flexbox