每当我放大、缩小或拉伸浏览器时，每个定位都会搞砸答案

【问题标题】：Whenever I zoom in, zoom out, or stretch out my browser, every positioning gets screwed up每当我放大、缩小或拉伸浏览器时，每个定位都会搞砸
【发布时间】：2015-12-02 04:16:57
【问题描述】：

我知道这可能是一个荒谬的问题，但请多多包涵。我仍然是一个 CSS 菜鸟。

所以我开始使用 HTML/CSS 构建我的个人网站，但出于某种原因，每当我预览它然后放大、缩小或拉伸浏览器时，所有的定位都会四处移动并搞砸向上。它不会保持与我第一次在浏览器中打开它时显示的完全相同的位置。

非常令人沮丧，我不知道问题是什么。我该怎么做才能解决这个问题？请帮忙。

<html>
    <head>
        <title>Jason H Kang</title>
        <link rel="stylesheet" href="styles.css">
        <link href='https://fonts.googleapis.com/css?family=Roboto:500' rel='stylesheet' type='text/css'>
    </head>
    <body>

    <div id="wrapper">
        <div id="header">
            <ul>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Resume</a></li>
                <li><a href="#">Contact</a></li>
         </div>
         <div id="footer">
         </div>
    </div>

    <div id="span">
        <h1>Jason Kang</h1>
        <p class="basicinfo">23 Years Old | Junior Web Developer | NJ</p>
        <p class="introduction">Hello I am Jason Kang. Welcome to my personal website! Please contact me if you have further enquiries :)</p>
    </div>

    <div id="image">
        <img src="kangjason.jpg" alt="Face"> 
    </div> 

    </body>
</html>

这是我的 CSS 文件...

body {
    background-color: #4A708B;
    font-family: Arial, Helvetica, sans-serif;
}

* {
    margin: 0;
    padding: 0;
}

#wrapper {
    border: 1px solid;
    width: 100%;
    height: 5%;
    margin: 0 auto;
    padding: 0.5% 0.5% 0.5% 0.5%;
    background-color: #3CB371;
}

#header ul {
    list-style-type: none;
}

#header ul li {
    float: left;
    color: #FFFFFF;
    width: 14%;
    text-align: center;
    padding: 0.313em 2.813em;
    font-family: Gill Sans;
    font-size: 1.1em;
    font-weight: normal;
    height: 1.250px;
    line-height: 2em;
    position: relative;
}

#header ul li:hover {
    background-color: #000000;
    height: 1.7em;
}

#header ul li a {
    text-decoration: none;
    color: #FFFFFF;
}

h1 {
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 2.0em;
    padding-left: 16.5em;
    padding-top: 2.5em;
}

.basicinfo {
    font-size: 1.3em;
    color: white;
    text-align: center;
    padding-right: 12.8em;
    padding-top: 1em;
}

.introduction {
    font-size: 1.1em;
    color: white;
    float: right;
    padding-right: 20em;
    padding-top: 3em;
}

#footer {
    background:#000000;
    width:100%;
    height:40px;
    position:fixed;
    bottom:0px;
    left: 0px;
}

img {
    border-radius: 50%;
    width: 205px;
    height: 205px;
    padding: 45px;
}

【问题讨论】：

欢迎体验响应式网页设计的乐趣。你最好的选择，尤其是作为初学者，是使用某种框架来提供设计不同浏览器大小的能力，而你不必处理它，例如Bootstrap。
另外，在格式化您的代码时，您的 HTML 无效。您的页眉中缺少结束 <ul> 标记，并且在其余内容上方还有页脚 <div>？

标签： html css

【解决方案1】：

理想情况下，当我们在响应式网站上工作时，我们应该有一个容器/包装器 div 来包装所有内部元素。在您的情况下，id 为“span”的 div 不在包装器内。

另外，建议使用响应式框架，如引导程序或基础或骨架，以便更好地理解

【讨论】：

但是如果我使用框架，它不会用其他人替换我所有的颜色和我想要的样式吗？
不..它不会。您可以通过给他们一个类名并将该类添加到引导程序默认类来应用您自己的 css
您始终可以使用自己的颜色类。

【解决方案2】：

您想要实现的是响应式设计，而在没有任何框架帮助的情况下制作响应式网站对于初学者来说是相当困难的。我建议您使用诸如Bootsrap 或Foundation by Zurb 之类的框架。

您可以使用这些框架并根据需要对其进行修改。

【讨论】：