文字和元素不会随浏览器窗口大小缩放吗？

Question

我正在为我的HTML和CSS类入门做最后的项目。

我正在建立一个非常简单的网站，在我想查看调整浏览器窗口大小时页面的外观之前，一切似乎都进行得很好。在完成任何大小的调整之前，该页面看起来都很好，然后所有元素开始真正被弄乱。

我是一个完全菜鸟，现在已经将尝试解决此问题的时间延长了将近一个小时。我不太确定该怎么办。我正在尝试使元素缩放到一定的最小宽度，但是我担心ive从一开始就把整个网站建错了。

这是代码，如果有人可以提供一些见解，我将非常感激。

#wrapper {
  height: 1000px;
  margin: 0 auto;
  background-color: black;
  background-image: url(images/background.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
}

#header {
  height: 150px;
  position: absolute;
  background-color: red;
  width: 100%;
}

#welcome {
  left: 75px;
  position: absolute;
  bottom: 0;
  width: 420px;
  height: 100px;
  background-color: green;
}

.w {
  font-family: courier;
  position: absolute;
  font-size: 64pt;
  left: 20px;
  bottom: 0px;
  color: #fff;
  margin: 0;
  line-height: 1;
}

#main-nav {
  position: absolute;
  bottom: 0;
  right: 0;
}

#main-nav ul li {
  float: left;
}

#main-nav ul li a {
  color: #fff;
  display: inline-block;
  padding: 20px;
  text-decoration: none;
  font-family: courier;
  font-size: 24pt;
  white-space: no-wrap;
}

#main-nav ul li a.current {
  font-weight: bold;
  font-size: 28pt;
}

#main-nav ul li a:hover {
  color: #ffb0ac;
}

#main-content {
  position: relative;
  width: 100%;
  height: 500px;
}

.intro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: courier;
  font-size: 36pt;
  color: #fff;
}

.button {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="wrapper">
  <header id="header">
    <div id="welcome">
      <h1 class="w">Welcome</h1>
    </div>
    <nav id="main-nav">
      <ul>
        <li><a class="current" href="#">Home</a></li>
        <li><a href="#">Introduction</a></li>
        <li><a href="#">Keys</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <div id="main-content">
    <h1 class="intro">Basic Music Theory Introdution</h1>
    <img class="button" src="images/button.jpg" alt="button">
  </div>
</div>
<!-- End of wrapper-->

Answer 1

您的元素都使用css中的固定像素大小。您还有其他选项，可以将元素设置为视口宽度的百分比（50vw）或高度的百分比（50vh），或仅百分比（50％）。如果在另一个元素中使用百分比，它将被缩放到该元素而不是浏览器窗口。

也-您的CSS中有pt大小。那些不存在于CSS中，需要将其更改为px。有多种计算方法可以将pt大小转换为其他单位。

例如，我已经在下面复制了您的代码片段，并更改了一些大小以使用视口宽度（vw）视口高度（vh）和百分比。您的CSS可能是这样的：

#wrapper {
  height: 100vh;
  margin: 0 auto;
  background-color: black;
  background-image: url(images/background.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
}

#header {
  height: 30vh;
  position: absolute;
  background-color: red;
  width: 100%;
}

#welcome {
  left: 5vw;
  position: absolute;
  bottom: 0;
  width: 420px;
  height: 100px;
  background-color: green;
}

.w {
  font-family: courier;
  position: absolute;
  font-size: 15vw;
  left: 20px;
  bottom: 0px;
  color: #fff;
  margin: 0;
  line-height: 1;
}

#main-nav {
  position: absolute;
  bottom: 0;
  right: 0;
}

#main-nav ul li {
  float: left;
}

#main-nav ul li a {
  color: #fff;
  display: inline-block;
  padding: 20px;
  text-decoration: none;
  font-family: courier;
  font-size: 4vw;
  white-space: no-wrap;
}

#main-nav ul li a.current {
  font-weight: bold;
  font-size: 28pt;
}

#main-nav ul li a:hover {
  color: #ffb0ac;
}

#main-content {
  position: relative;
  width: 100%;
  height: 500px;
}

.intro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: courier;
  font-size: 36pt;
  color: #fff;
}

.button {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="wrapper">
  <header id="header">
    <div id="welcome">
      <h1 class="w">Welcome</h1>
    </div>
    <nav id="main-nav">
      <ul>
        <li><a class="current" href="#">Home</a></li>
        <li><a href="#">Introduction</a></li>
        <li><a href="#">Keys</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <div id="main-content">
    <h1 class="intro">Basic Music Theory Introdution</h1>
    <img class="button" src="images/button.jpg" alt="button">
  </div>
</div>
<!-- End of wrapper-->