Question

我知道这可能是一个荒谬的问题，但请耐心等待。我仍然是一个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;
}

Answer 1

理想情况下，当我们处理响应式网站时，我们应该有一个容器/包装器div，它将包装所有内部元素。在你的情况下，id为＃34; span＆＃34;不在包装器内。

此外，建议使用响应式框架，如bootstrap或基础或骨架，以便更好地理解

Answer 2

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

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

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

2 个答案: