调整浏览器窗口大小时，此网页变得混乱答案

【问题标题】：This web page gets messy when resize the browser window size调整浏览器窗口大小时，此网页变得混乱
【发布时间】：2020-04-18 00:00:46
【问题描述】：

我正在设计这个网页。我为此使用了 Visual Studio 代码。并使用了 HTML 和 CSS。我也是网页设计的初学者。

调整浏览器窗口大小时设计会变得混乱。文本、图像和其他内容在这里和那里移动。
浏览器更改时设计更改（IE、chrome、Firefox）。例如：-边框边距变化。

我该怎么办？

*{
    margin: 0%;
    padding: 0%;
    box-sizing: content-box;
}
html{
    font-size: 10px;
    font-family: 'Amatic SC', cursive;

}
section{
    width: 100%;
    height: 100%;
    color: #fff;
    background: linear-gradient(45deg,#770a0a,#a01919,#d3163f,#d3511e,#ee2f16);
    background-size: 400% 400%;
    position: relative;
    animation: change 30s ease-in-out infinite;
    
}
h1{
    font-size: 380%;
    letter-spacing: 0.5vh;
    text-transform: uppercase;
    border: 0.3vh solid white;
    border-radius: 7vh;
    float: left;
    position: absolute;
    padding: 1% 5%;
    padding-left: 1%;
    top: 80%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.imp:hover{
    color:rgb(245, 231, 167);
}

@keyframes change{
    0%{
        background-position:0 50% ;
    }
    50%{
        background-position:100% 50% ;
    }
    100%{
        background-position:0 50% ;
    }
}
.icon{
    width: 11%;
    position: absolute;
    top: 32.5%;
    left: 53%;
    transform: translate(-50%,-50%);
}
.menu{
    font-size: 280%;
    border: 0.3vh solid white;
    border-radius: 7vh;
    float: right;
    position: relative;
    margin-right: 2%;
    margin-top: 2%;
}
.menu ul li{
    display: inline-block;
    line-height: 150%;
    margin: 0 3vh;
    padding: 0.009%;
    cursor: pointer;
    position:relative;
    font-weight: bold;
}
.menu ul li:hover{
    font-size: 130%;
    
}
a:link, a:visited {
    color: white;
    cursor: auto;
  }
  
  a:link:active, a:visited:active {
    color: white;
  }
.Home{
    color: rgb(245, 231, 167);
}
.about{
    font-size: 300%;
    position: absolute;
    padding: 2%;
    top: 53%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
}
.hola{
    font-size: 250%;
}
.next{
    width: 3%;
    position: absolute;
    top: 80%;
    left: 56%;
    transform: translate(-50%,-50%);
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
        <title>ImpressMe | Home</title>
        <link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

       <section>
           <img class="icon" src="cute.png" alt="Boy" title="Hola....">

           <div class="go">
           <a href="sendme/sendme.html" class="imp">
           <h1>Impress Me</h1>
           <img class="next" src="go.png" alt="go"></a>
           </div>

           <div class="about">
            <p class="hola">Hola.....!</p><p>you look familiar<br>I'm pretty sure you got something to impress me<br>Tell me<br>I would love to hear from you</p>
        </div>

       <div class="menu">
           <ul>
               <a href="index.html">
               <li class="Home">Home</li></a>
               <a href="About/about.html">
               <li class="#">About</li></a>
               <li class="#">Contact</li>
           </ul>
       </div>
       </section>
    </body>
</html>

【问题讨论】：

标签： html css web

【解决方案1】：

我建议您了解 Bootstrap，例如 here。对于您的问题，您实际上只需要 Container 和 Grid System Basics，让您的网站响应。

对于不同浏览器的问题，请使用Normalize.css 使其看起来更一致。（它已经包含在 Bootstrap 中）

【讨论】：