当窗口变小或在手机上等时，网站设计就会中断。 （网格、div 或其他解决方案？）

问题描述 投票：0回答：1

我一直在尝试建立一个个人网站，以获取乐趣和个人艺术等，但我没有接受过任何编码的正规教育。我尝试在自己的教程中做到这一点，甚至有一个朋友帮助我，尽管它在我的主屏幕上看起来不错，但它在其他屏幕上，特别是在手机上，却崩溃了...... Here's the structure of what I want to do Here's a mockup of what I want it to look like 我最大的问题是如何让文本框装饰工作并重叠，同时保持其下方的结构和其他内容。

我所尝试的问题是，尽管尝试了多种方法来调整所有内容的大小，但它还是破坏了很多

这是我尝试使用 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>
    <!-- The style.css file allows you to change the look of your web pages.
         If you include the next line in all your web pages, they will all share the same look.
         This makes it easier to make new pages for your site. -->
    <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>

我也尝试过类似的其他方法，但不起作用。

<!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>
    <!-- The style.css file allows you to change the look of your web pages.
         If you include the next line in all your web pages, they will all share the same look.
         This makes it easier to make new pages for your site. -->
    <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>

有更好的方法吗？也许有网格或其他 CSS 功能？我正在关注从很多帖子、阅读和我的朋友那里收集到的一切，但这就是我所能做的。预先感谢您，并对我糟糕的英语和糟糕的编码经验表示歉意。

html css web mobile-website
1个回答
0
投票

您遇到的问题是您的网站无法很好地适应较小的屏幕。为了使您的网站具有响应能力，您应该考虑实施移动优先的设计方法。首先在 w3Schools 或 mozilla 上阅读响应式设计基础知识。

但是要直接回答您的问题，您正在搜索媒体查询：

@media (min-width:480px) { /* CSS code here */ }

通过使用此功能，您可以设置特定的屏幕尺寸、手机或 iPad 等设计。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.