我是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>响应式网页设计。实现响应式网页设计的几个关键是媒体查询和带有fr单元的CSS网格布局。
使用媒体查询
媒体查询允许你应用CSS样式取决于设备的一般类型(如印刷与丝网)或其他特征，如作为屏幕分辨率或浏览器视窗宽度。
固定和灵活的轨道尺寸
您可以创建具有固定轨道大小的网格-例如使用像素。将网格设置为指定适合所需布局的像素。你也可以使用灵活的百分比大小或for创建网格设计用于此目的的单元。
响应式网页设计才是解决这个问题的真正方法。对于一个简单的方法，h1和h2元素，左侧和顶部的值改变px为%的css。
注意:px值是永久性的，在调整大小时不会改变。但是%的值是动态的，当我们调整窗口的大小