Html 如何使站点在调整窗口大小时不改变任何内容？

我试图让它，当我的用户调整窗口大小时，它不会移动页面上的任何内容，也不会调整任何内容。但我仍然不希望网站在不同的屏幕大小上看起来是一样的。因为现在网站会移动我的图像和按钮。按钮也会改变大小

*{
框大小：边框框；}
#包装纸{
左边距：自动；
右边距：自动；
宽度：100%；
身高：100%；
}
身体{
背景色：黑色；
字体系列：“源Sans-Pro”，无衬线；
文本对齐：居中；
颜色：#ccc；
}
div{
身高：100%；
}
帆布{
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
右：0；
左：0；
底部：0；
}
h3{
位置：绝对位置；
字体大小：100px；
字号：100；
颜色：白色；
利润上限：70像素；
左边距：80px；
}
img{
利润上限：230像素；
右边距：0px；
}
.家{
位置：绝对位置；
边框：2个实心#中交；
文本对齐：居中；
颜色：#ccc；
字号：26px；
线高：60px；
宽度：10%；
高度：60px；
边缘顶部：180像素；
左边距：500px；
}
.关于{
位置：绝对位置；
边框：2个实心#中交；
文本对齐：居中；
颜色：#ccc；
字号：26px；
线高：60px；
宽度：10%；
高度：60px；
边缘顶部：180像素；
左边距：750px；
}
.项目{
位置：绝对位置；
边框：2个实心#中交；
文本对齐：居中；
颜色：#ccc；
线高：60px；
宽度：10%；
高度：60px；
字号：26px；
边缘顶部：180像素；
左边距：1000px；
}
.联系方式{
位置：绝对位置；
边框：2个实心#中交；
文本对齐：居中；
颜色：#ccc；
线高：60px；
字号：26px；
宽度：10%；
高度：60px；
边缘顶部：180像素；
左边距：1250px；
}
.主页：悬停{
边框颜色：#0091FF；
颜色：#0091FF；
}
.关于：悬停{
边框颜色：#0091FF；
颜色：#0091FF；
}
.项目：悬停{
边框颜色：#0091FF；
颜色：#0091FF；
}
.联系人：悬停{
边框颜色：#0091FF；
颜色：#0091FF；
}

家
标题

在元素上设置最小宽度和最小高度。这将防止它们变小，然后你可以做最大宽度和最大高度来防止它们生长。另外，将其从宽度更改为：10%；到实数/绝对数。这意味着它显示在任何屏幕上的10%

---

为什么一切都是绝对位置？Idk，我对网络开发有点陌生。好的，明白了。你想要一个标题菜单吗？但是为什么要使用这些画布和img呢？画布使用JavaScript来创建浮动粒子，但我没有包括JavaScript。我不认为这是造成问题的原因。问题是你的html结构和css位置，左边距等。我已经尝试过了，但我唯一的问题是，我想有最小宽度设置为100%的页面。但当我将其设置为100%时，它只会调整页面大小。将元素设置为最小值和最大值，而不是100%。或者这样做：宽度：150px；现在，您已将所有内容设置为宽度：10%；当屏幕大小改变时，表示当前屏幕的10%。如果你设置一个立体宽度，你就不会有问题。我希望网站在其他屏幕尺寸上看起来一样。如果我将所有内容都设置为特定的大小而不是百分比，它在其他屏幕上看起来是太大还是太小？不同的分辨率看起来会有所不同，但项目的宽度不会改变。现在，当你缩小你的网站时，你的文本开始移出你的div。好的，我将所有按钮的宽度设置为200px。这解决了按钮移动的问题，但下一个问题是图像仍在移动。

* {
  box-sizing: border-box; }

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:100%;
    height: 100%;
}

body {
  background-color: black;
  font-family: "Source Sans Pro", sans-serif;
  text-align: center;
  color: #ccc;
}

div {
  height: 100%;
}

canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0; 
}

canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0; 
}

h3 {
  position: absolute;
  font-size: 100px;
  font-weight: 100;
  color: white;
  margin-top: 70px;
  margin-left: 80px;
}

img {
    margin-top: 230px;
    margin-right: 0px;
}

.home {
    position: absolute;
    border: 2px solid #CCCCCC;
    text-align: center;
    color: #ccc;
    font-size: 26px;
    line-height: 60px;
    width: 150px;
    height: 60px;
    margin-top: 180px;
    margin-left: 500px;
}

.about {
    position: absolute;
    border: 2px solid #CCCCCC;
    text-align: center;
    color: #ccc;
    font-size: 26px;
    line-height: 60px;
      width: 150px;
    height: 60px;
    margin-top: 180px;
    margin-left: 750px;
}

.projects {
    position: absolute;
    border: 2px solid #CCCCCC;
        min-width: ;
    text-align: center;
    color: #ccc;
    line-height: 60px;
      width: 150px;
    height: 60px;
    font-size: 26px;
    margin-top: 180px;
    margin-left: 1000px;
}

.contact {
    position: absolute;
    border: 2px solid #CCCCCC;
    text-align: center;
    color: #ccc;
    line-height: 60px;
    font-size: 26px;
       width: 150px;
    height: 60px;
    margin-top: 180px;
    margin-left: 1250px;
}

.home:hover{
    border-color: #0091FF;
    color: #0091FF;
}

.about:hover{
    border-color: #0091FF;
    color: #0091FF;
}

.projects:hover{
    border-color: #0091FF;
    color: #0091FF;
}

.contact:hover{
    border-color: #0091FF;
    color: #0091FF;
}