每当我放大、缩小或扩展浏览器时，每个定位都会出错

我知道这可能是一个荒谬的问题，但请耐心等待。我仍然是一个CSS noob。

因此，我开始用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;
}

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

此外，为了更好地理解

，建议使用响应式框架，如bootstrap或foundation或skeleton

您试图实现的是响应式设计，对于初学者来说，在没有任何框架帮助的情况下创建一个响应式网站是非常困难的。我建议你使用Bootsrap或Zurb的Foundation这样的框架作品。

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

相关内容

最新更新

热门标签：