网页窗口缩小或移动端布局崩溃，求Grid/Div等解决方案

我为展示个人艺术作品搭建了一个网站，无正式编程学习经历，通过自学教程和朋友协助完成开发，但网站仅在主屏幕显示正常，窗口缩小或在手机端时布局严重崩溃。我有想要实现的结构和效果原型设计图。

当前核心问题：

• 如何实现文本框装饰的层叠效果，同时保持下方结构稳定
• 布局的响应式适配问题

尝试了多种调整尺寸的方法，但布局仍频繁崩溃。

尝试方案1（使用px单位） #

<!DOCTYPE html>
<html lang="en">
<html>
  <head>
    <link rel="icon" type="image/x-icon" href="/icon.webp">
    <meta charset="UTF-8">
    <meta property="og:image" content="/testbg.jpg"/>
    <meta property="og:title" content="Nurutest" />
    <meta property="og:description" content="idk man im focking working" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wow!</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
<style>
body {
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 0;
 background-image: url('/bg.png');
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 background-attachment: fixed;
}

h3 {
   margin: 3px; 
   margin-top: 5px;
}

.textboximage {
  pointer-events: none;
  position: absolute;
  z-index: 2;
  margin-top: 6%;
  overflow: hidden;
  width: auto;
  height: auto;
}

.textboxflair {
  border: 5px outset;
  border-color: rgba(0,0,0,0);
  text-align: center;
  overflow: auto;
  width: 1000px;
  height: 700px;
  gap: 5px;
  margin-top: 6%;
  box-sizing: border-box;
  display: flex;
  flex-direction: right;
  background-color: #eadfd1;
}

.buttonbox {
  border: 5px outset;
  border-color: rgba(0,0,0,0);
  text-align: left;
  width: 220px;
  height: 680px;
  top: 5px;
  left: 5px;
  position: relative;
  box-sizing: border-box;
}

.button {
  border: 5px outset;
  border-color: rgba(0,0,0,0);
  text-align: left;
  width: 200px;
  height: 220px;
  top: 5px;
  left: 5px;
  margin-bottom: 5px;
  position: relative;
  box-sizing: border-box;

}

.textbox {
  border: 5px outset red;
  text-align: left;
  width: 750px;
  height: 680px;
  position: relative;
  box-sizing: border-box;
  top: 5px;
  left: 5px;
}

.maintext {
  border: 5px outset red;
  text-align: left;
  width: 740px;
  height: 300px;
  position: relative;
  box-sizing: border-box;
  top: 5px;
  left: 5px;
}

.statusbox {
  border: 5px outset red;
  text-align: left;
  width: 740px;
  height: 180px;
  position: relative;
  box-sizing: border-box;
  top: 5px;
  left: 5px;
  display: flex;
  flex-direction: right;
}

.statuspic {
  border: 5px outset red;
  text-align: left;
  width: 170px;
  height: 170px;
  position: relative;
  box-sizing: border-box;
  top: 5px;
  left: 5px;
}

.statustext {
  border: 5px outset red;
  text-align: left;
  width: 600px;
  height: 170px;
  position: relative;
  box-sizing: border-box;
  top: 5px;
  left: 5px;
}

.updatelog {
  border: 5px outset red;
  text-align: left;
  width: 740px;
  height: 180px;
  position: relative;
  box-sizing: border-box;
  top: 5px;
  left: 5px;
}



</style>
</head>
<body>

<img class="textboximage" src="/textbox.webp">

<div class="textboxflair">

  <div class="buttonbox">
   <div class="button">
       <h3>Personal</h3>
   </div>
   
   <div class="button">
       <h3>Projects</h3>
   </div>
      
   <div class="button">
       <h3>Internet</h3>
    </div>
  </div>
  
  <div class="textbox">
    <div class="maintext">
    </div>
    <div class="statusbox">
        <div class="statuspic">
        </div>
        <div class="statustext">
        </div>
    </div>
    <div class="updatelog">
    </div>
  </div>
</div>


</body>
</html>

尝试方案2（使用vh和百分比单位） #

<!DOCTYPE html>
<html lang="en">
<html>
  <head>
    <link rel="icon" type="image/x-icon" href="/icon.webp">
    <meta charset="UTF-8">
    <meta property="og:image" content="/testbg.jpg"/>
    <meta property="og:title" content="Nurutest" />
    <meta property="og:description" content="idk man im focking working" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Myah!</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
<style>
body {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 100vh;
 margin: 0;
 background-image: url('/bg.png');
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 overflow: hidden;
}

h3 {
   margin: 3px; 
   margin-top: 5px;
}

.textboximage {
  pointer-events: none;
  position: absolute;
  z-index: 2;
  margin-top: 6%;
  overflow: hidden;
  width: 150vh;
  height: 105vh;

}

.textboxflair {
  border: 5px outset;
  border-color: rgba(0,0,0,0);
  text-align: center;
  overflow: auto;
  width: 100vh;
  height: 75vh;
  max-width: 1000px;
  gap: 5px;
  margin-top: 6%;
  box-sizing: border-box;
  display: flex;
  flex-direction: right;
  background-color: #eadfd1;
  
  position: absolute;
}

.buttonbox {
  border: 5px outset lightgray;
  text-align: left;
  width: 40%;
  height: 99%;
  top: 5px;
  left: 5px;
}

.button {
  border: 5px outset lightgray;
  text-align: left;
  width: 100%;
  height: 33%;
  top: 5px;
  left: 5px;
  margin-bottom: 5px;

}

.textbox {
  border: 5px outset lightgray;
  text-align: left;
  width: 100%;
  height: 99%;
  top: 5px;
  left: 5px;
}

.maintext {
  border: 5px outset lightgray;
  text-align: left;
  width: 100%;
  height: 45%;
  top: 5px;
  left: 5px;
}

.statusbox {
  border: 5px outset lightgray;
  text-align: left;
  width: 100%;
  height: 33%;
  top: 5px;
  left: 5px;
  display: flex;
  flex-direction: right;
}

.statuspic {
  border: 5px outset lightgray;
  text-align: left;
  width: 30%;
  height: 100%;
  top: 5px;
  left: 5px;
}

.statustext {
  border: 5px outset lightgray;
  text-align: left;
  width: 70%;
  height: 100%;
  top: 5px;
  left: 5px;
}

.updatelog {
  border: 5px outset lightgray;
  text-align: left;
  width: 100%;
  height: 22%;
  top: 5px;
  left: 5px;
}



</style>
</head>
<body>

<img class="textboximage" src="/textbox.webp">

<div class="textboxflair">

  <div class="buttonbox">
   <div class="button">
       <h3>Personal</h3>
   </div>
   
   <div class="button">
       <h3>Projects</h3>
   </div>
      
   <div class="button">
       <h3>Internet</h3>
    </div>
  </div>
  
  <div class="textbox">
    <div class="maintext">
    </div>
    <div class="statusbox">
        <div class="statuspic">
        </div>
        <div class="statustext">
        </div>
    </div>
    <div class="updatelog">
    </div>
  </div>
</div>


</body>
</html>

求助 #

有没有更优的实现方式？比如使用Grid或其他CSS特性？我仅能通过帖子、资料和朋友指导摸索，提前感谢您的帮助。

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