如何让网站适配窗口大小？HTML/CSS新手求助附代码

我是HTML和CSS新手，可能这是个基础问题，但调整浏览器窗口大小时，我的网站无法适配窗口。请问这是CSS问题还是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;
}

HTML代码 #

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

这是CSS布局问题，你的HTML已经正确设置了移动端适配的核心标签<meta name="viewport" content="width=device-width, initial-scale=1.0">，但CSS里的绝对定位+固定像素值导致元素无法随窗口缩放。

核心问题点： #

• h1、h2使用position: absolute配合固定的left、width、height像素值，这些数值不会随窗口大小变化，窗口缩小后元素会溢出或位置错乱。
• 字体大小用固定px，小屏幕下文字可能过大导致换行异常。
• Lato字体没有1300的字重，浏览器会自动降级显示，影响预期样式。

修复方案： #

1. 替换绝对定位，改用弹性布局：用flex让文本内容居中，同时保持响应式特性。
2. 使用相对单位：用rem设置字体大小，用max-width限制文本容器宽度，避免宽屏上文字拉伸过长。
3. 添加媒体查询：针对小屏幕调整样式，优化显示效果。

修改后的CSS代码示例 #

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

body {
  min-height: 100vh;
  background: linear-gradient(#bbab9b, #D9D9D9);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  padding-top: 8rem; /* 给导航栏预留空间 */
}

h1 {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700; /* 替换无效的1300字重 */
  font-size: 2.5rem; /* 相对单位，等价于默认根字体下的40px */
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: black;
  max-width: 90vw;
  text-align: center;
}

h2 {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 200;
  font-size: 1.75rem; /* 等价于默认根字体下的28px */
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: black;
  max-width: 600px; /* 限制最大宽度提升可读性 */
  text-align: center;
  margin-top: 1rem;
}

/* 小屏幕适配 */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.5rem;
  }
}

内容的提问来源于stack exchange，提问作者Dialya McAdory