html 如何让网站适应窗口大小？

cunj1qz1 于 2022-12-16 发布在其他

关注(0)|答案(2)|浏览(115)

我是HTML和CSS的新手，所以这可能是个基本问题，但是当我改变窗口大小时，网站并不适应窗口。这是CSS问题还是HTML问题，我该如何解决？包含我的HTML以防万一。我希望这能更好一点，我也添加了一些CSS。我已经尽我所能包含了，如果我尝试在这篇文章中添加更多，它给我一个错误。

body {
  min-height: 100vh;
  background: linear-gradient(#bbab9b, #D9D9D9);
}

h1 {
  position: absolute;
  width: 319px;
  height: 44px;
  left: 892px;
  top: 284px;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 1300;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: 0.04em;
  color: black;
}

h2 {
  position: absolute;
  width: 424px;
  height: 175px;
  left: 896px;
  top: 344px;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 200;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: 0.04em;
  color: black;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dialya's Portfolio</title>
  <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <nav class="navbar">
      <a href="#" class="nav-branding">dialya</a>
      <ul class="nav-menu">
        <li class="nav-item">
          <a href="help.html" class="nav-link"> Home</a> </li>
        <li class="nav-item">
          <a href="AboutMe.html" class="nav-link"> About Me</a> </li>
        <li class="nav-item">
          <a href="Projects.html" class="nav-link"> My Projects</a> <br>
        </li>
      </ul>
      <div class="hamburger">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </div>
    </nav>
  </header>

  <script src="app.js"></script>
  <h1> Hi, I'm Dialya!</h1> <br>
  <h2> I am a multidiciplinary designer based in Memphis, Tennessee. I love to design, code, and research! </h2>
</body>

</html>

Html

来源：https://stackoverflow.com/questions/74818290/how-do-you-get-a-website-to-adjust-to-window-size