时间戳

首页 > 解决方案 > 文本和元素不会随浏览器窗口大小缩放？

html - 文本和元素不会随浏览器窗口大小缩放？

问题描述

我正在为我的 HTML 和 CSS 类介绍做我的最后一个项目。

我正在构建一个非常简单的网站，一切似乎都很顺利，直到我想看看当我调整浏览器窗口大小时页面的外观。在完成任何类型的调整大小之前，页面看起来都很好，然后所有元素都开始变得非常混乱。

我是一个完全的菜鸟，并且一直试图解决这个问题将近一个小时。我不确定该怎么做。我正在尝试使元素缩放到某个最小宽度，但我担心我从一开始就错误地构建了整个网站..

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

#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-->

标签： htmlcss

解决方案

您的元素都在 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-->

推荐阅读