Javascript 当窗口调整大小时，如何使我的网站保持不变

现在，当我调整我的网页大小时，它会把我的整个网站弄得一团糟。我已经找到了解决方案，但它们对我不起作用。我读到，这可能是因为我有一些位置设置为绝对，我试图将它们设置为相对，但没有工作。感谢您的帮助：）

网站：

@导入url(http://fonts.googleapis.com/css?family=Source+代码+Pro:400）；
*{边距：0；填充：0；}
html{
背景色：黑色；
不透明度：.9；
最小高度：100%；
宽度：100%；
身高：100%；
背景重复：无重复；
z指数：2000；
}
h1{
位置：绝对位置；
字体系列：“激情一号”；
字体大小：200px；
颜色：蓝色；
字母间距：1.6雷姆；
顶部：calc（62%-200px）；
文本对齐：居中；
文本阴影：2px4p3pRGBA（0,0,0,0.6）；
不透明度：.8；
宽度：100%；
z指数：2001年；
}
氢{
位置：绝对位置；
字体系列：“开放式SAN”，单空格；
字号：26px；
颜色：#6EBEDC；
字母间距：.4rem；
顶部：calc（64%-30px）；
文本对齐：居中；
不透明度：.68；
宽度：100%；
z指数：2002年；
}
h3{
位置：绝对位置；
字体系列：“开放式SAN”，单空格；
字体大小：24px；
颜色：#6EBEDC；
字母间距：.4rem；
顶部：钙（38%-30px）；
文本对齐：居中；
不透明度：.68；
宽度：100%；
z指数：2003年；
}
身体{
}
页脚{
位置：绝对位置；
底部：钙（22%-100px）；
右：calc（16%-125px）；
字母间距：.6rem；
z指数：2002年；
}
.主页英雄模块{
边界权：无；
左边界：无；
位置：相对位置；
}
.没有视频。视频容器视频，
.touch.video容器视频{
显示：无；
}
.没有视频。视频容器。海报，
.touch.视频容器.海报{
显示：块！重要；
}
.视频容器{
位置：相对位置；
身高：106%；
宽度：100%；
溢出：隐藏；
背景：#000；
}
.视频容器.过滤器{
z指数：100；
位置：绝对位置；
背景：rgba（0,0,0,0.4）；
宽度：102%；
}
.视频容器视频{
位置：绝对位置；
z指数：0；
底部：0；
}
.video容器video.fillWidth{
宽度：100%；
}
a{文本装饰：无；}
/*该类被添加到scroll上*/
.固定{
位置：固定；
排名：0；
高度：70像素；
z指数：1；
}
/*导航设置*/
导航{
位置：绝对位置；
底部：0；
宽度：100%；
高度：70像素；
背景：#5b；
不透明度：.8；
字体系列：“开放式无粗体”，AvenirNext中型，无衬线；
}
导航：悬停{
不透明度：.9；
}
李海军{
显示：内联块；
填充：24px 24px；
}
导航李a：悬停{
颜色：黑色；
}
李娜{
颜色：白色；
文本转换：大写；
}
部分{
高度：100vh；
}
/*屏幕设置*/
#屏幕1{
背景#1061E5；
文本对齐：居中；
}
#屏幕1 p{
填充顶部：200px；
文本对齐：居中；
}
#屏幕2{
背景：白色；
文本对齐：居中；
}
#屏幕3{
背景：黑色；
文本对齐：居中；
}
@仅介质屏幕和（最大宽度：520像素）{
李海军{
填充：24px 4px；
}
李娜{
字体大小：16px；
}
}

AL-SABA.net
设计•代码•程序
萨巴
个人网站
您的浏览器不支持视频标记。我建议你升级你的浏览器。
您的浏览器不支持视频标记。我建议你升级你的浏览器。
向下滚动

看起来除了“Al Saba”h1之外，一切正常。可以使用考虑视口宽度的相对值来声明字体大小。

更改您的

h1

CSS。这样做：

字体大小：200px

类似于

字体大小：15vw

“设计•代码•程序”和“个人网站”与“Al Saba”重叠，因为它们都在同一个div中。请尝试以下方法：

<header>
         <div> <h3> Design • Code • Programs </h3></div>

         <div> <h1> AL-SABA </h1></div>

         <div> <h2> Personal Website </h2></div>
</header>

设计•代码•程序
萨巴
个人网站

您可以调整位置

例如，尝试调整标题元素的位置。你可以看到一个大的不同

h1,h2,h3 {
position:static;
}

---

只需删除此元标记

<meta name = "viewport" content = "width = device-width, initial-scale=1">

只需使用更多的媒体查询，您就可以获得所需的任何外观：）就此而言，所需的输出是什么<代码>“弄乱了我的整个网站”不是一个问题的清晰描述…好吧！这也起到了作用。你知道我如何在调整屏幕大小时修复视频背景的错误吗？在调整页面大小时定义“错误排除”，背景视频不再居中。在这行：

只需删除整个

样式

部分（所有这些：

样式=“宽度：1343px；”

）。不要用任何东西替换它。我在任何地方都看不到这个：style=“width:1343px；”？那在哪里？我所看到的是：