我正在为一个学校项目制作一个网站，但我在定位网站元素的不同分辨率时遇到了问题

Question

正如标题中所述，我正在为学校制作一个网站，在创建网站的过程中，我发现当我以不同的分辨率在屏幕上显示页面时，我网站上的元素无法正确排列。我对html/css相当陌生，并且陷入了如何解决此问题的困境。任何建议或帮助将不胜感激。

这是我的 html 文件的正文部分：

        <a href='index.html'>
        <img src="ImagesLogoLogopng.png" alt="Explore Germany"/> 
        </a> <!-- Inserting Logo at top of page -->
            <div id="whitespace">
            <a> <img  id="twitt" src="Imagesimagestwitter_web.png"> </a>
            <a> <img  id="email" src="Imagesimagesemail_web.png"> </a>
            </div>
            <nav>
                <div id="top" class = "line black"></div>  <!-- This is the black line just above the links at top of page -->
                <ul>            <!-- A list with links to external pages for my header -->
                <li><a id="menu" href="why.html">Why Germany?</a></li>   
                <li><a id="menu" href="where.html">Where In Germany?</a></li>
                <li><a id="menu" href="language.html">German Language</a></li> 
                <li><div  class="box grey"></div></li>
                </ul>
                <div id="bottom" class = "line black"></div>     <!-- This is the black line just below the links at top of page -->
            </nav>
    </header>
    <img id="map" src="ImagesimagesMap.png">
    <img class="Icon" id="Hamburg" src="ImagesimagesIcon.png">  <div id="Hamburg_Name">Hamburg</div>
    <img class="Icon" id="Berlin" src="ImagesimagesIcon.png">    <div id="Berlin_Name">Berlin</div>
    <img class="Icon" id="Dresden" src="ImagesimagesIcon.png">    <div id="Dresden_Name">Dresden</div>
    <img class="Icon" id="Dusseldorf" src="ImagesimagesIcon.png"> <div id="Dusseldorf_Name">Dusseldorf</div>
    <img class="Icon" id="Cologne" src="ImagesimagesIcon.png">    <div id="Cologne_Name">Cologne</div>
    <img class="Icon" id="Frankfurt" src="ImagesimagesIcon.png">  <div id="Frankfurt_Name">Frankfurt</div>
    <img class="Icon" id="Munich" src="ImagesimagesIcon.png">     <div id="Munich_Name">Munich</div>

    <div id="info">
        <div id="name">Click on an Icon on the<br> map to learn more about that city</div>
        <div id="info1"></div>
        <img src="" id="cityImg">
        <div id="head"></div>
        <div id="info2"></div>
    </div>

            <div id="foot" class="footer black"> <!-- This is for the black box at the bottom which is the footer -->
                <nav>
                    <ul>
                        <li><a id="wfooter" href="index.html">Home</a></li>          <!-- This is a list of the links and lines in the footer -->
                        <li><a id="wfooter" href="why.html">Why Germany</a></li>
                        <li><a id="wfooter" href="where.html">Where In Germany</a></li>
                        <li><a id="wfooter" href="language.html">German Language</a></li>
                        <li><a id="wfooter2"><i>@Copyright Jack Ryan 2017 Contact: [e-mail]<i></a></li>
                    </ul>
            </nav>
        </div>



</body>

这是我的 css 文件：

body {
    width: 800px;
    height:1200px;
    margin:0 auto;
    vertical-align: middle;
    height:100%;
}
p {
    font-size: 15%
    font:;  
}
header img {
    vertical-align: middle;
    margin-left: 350px;
    margin-top:15px;
    max-height: 100px;
    max-width:100px;
}
#gate {
    max-width: 800px;
    margin-left: 0px;
    position:relative;
    bottom:16px;
}

html {
    width:100%;
    height:100%;
    background-color:black;
}   
ul {
    list-style-type:none;
    margin-left:-40px;
    padding: none;
    overflow: hidden;
}

#menu {
    margin-left:93px;
    max-width: 800px;
    float:left;
    display: block;
    padding:12px;
    background-color:#dddddd;
    text-align: center;
    text-decoration: none;
    font-family: "Proxima Nova";
    color:black;
    margin-top:0px;
}
#menu:hover {
    background-color: #cccccc;
}
.box {
    width:800px;
    height: 40px;
}
.grey {
    background:#dddddd;
}
.line {
    width:800px;
    height:2px;
}
.black {
    background:#000000;
}
#top {
    position:relative;
    bottom:-18px;
}
#bottom {
    position:relative;
    bottom:16px;
}
.back {
    width:800px;
    height:1225px;
}
.backwhere {
    width:800px;
    height:935px;
}
.darkgrey {
    background:#fefdfd;
}
.side  {
    position:absolute;
    width:10px;
    height:10px;
}
.footer {
    width:775px;
    height:150px;
    margin-left:12.5px;
    border-radius:12.5px;
}
#body {
    width:775px;
    margin-left:12.5px;
}
#footer {
    display: block;
    text-decoration:none;
    font-family:"Proxima Nova";
    position:relative;
    padding:5px;
    top:10px;
    color:white;
    margin-left:5px;
}
#footer2 {
    display: block;
    text-decoration:none;
    font-family:"Proxima Nova";
    position:relative;
    color:white;
    margin-left:15px;
    margin-top:20px;
}
#footer:hover {
    color:lightgray;
}
#twitt {
    position:relative;
    margin-left:750px;
    top:-125px;
}
#email {
    position:relative;
    margin-left:695px;
    top:-186px;
}
#whitespace {
    height:0px;
}
#map {
    position:absolute;
    left: 270px;
    margin-left:0px;
    max-height:85%;
    max-width:85%;
}
#hamburg {
    position:absolute;
    top:280px;
    left:480px;
}
#hamburg_name {
    position:absolute;
    top:280px;
    left:500px;
    font-family:"Proxima Nova";
}

#Berlin {
    position:absolute;
    top:350px;
    left:620px;
}
#Berlin_Name {
    position:absolute;
    top:350px;
    left:640px;
    font-family:"Proxima Nova";
}

#Dresden {
    position:absolute;
    top:425px;
    left:640px;
}
#Dresden_name {
    position:absolute;
    top:425px;
    left:660px;
    font-family:"Proxima Nova";
}

#Dusseldorf {
    position:absolute;
    top:435px;
    left:360px;
}
#Dusseldorf_name {
    position:absolute;
    top:435px;
    left:380px;
    font-family:"Proxima Nova";
}
#Cologne {
    position:absolute;
    top:460px;
    left:380px;
}
#Cologne_name {
    position:absolute;
    top:460px;
    left:400px;
    font-family:"Proxima Nova";
}

#Frankfurt {
    position:absolute;
    top:510px; 
    left:455px;
}

#Frankfurt_name {
    position:absolute;
    top:510px; 
    left:475px;
    font-family:"Proxima Nova";
}

#Munich {
    position:absolute;
    top:620px;
    left:550px;
}

#Munich_name {
    position:absolute;
    top:620px;
    left:570px;
    font-family:"Proxima Nova";
}
.Icon{
    height: 20px;
    width: 20px;
}
#info{
    position: absolute;
    top: 200px;
    left: 730px;
    background-color: #e6e6e6;
    height: 550px;
    width: 325px;
    border-radius:12.5px;
}
#Name {
    font-family:"Proxima Nova";
    font-size:25px;
    position: absolute;
    left:20px;
    top:10px;
}
#info1 {
    font-family:"Proxima Nova";
    font-size:15px;
    position:absolute;
    left:15px;
    top:40px;
}
#info2 {
    font-family:"Proxima Nova";
    font-size:15px;
    position:absolute;
    left:15px;
    top:320px;
}
#cityImg {
    position:absolute;
    top:120px;
    left:15px;
    max-width:300px;
    max-height:200px;
}
#head {
    font-family:"Proxima Nova";
    font-size:25px;
    position:absolute;
    left:15px;
    top:290px;
}
#foot {
position:absolute;
top:760px;
}
#wfooter {
    display: block;
    text-decoration:none;
    font-family:"Proxima Nova";
    position:relative;
    padding:5px;
    top:-5px;
    color:white;
    margin-left:5px;
}
#wfooter2 {
    display: block;
    text-decoration:none;
    font-family:"Proxima Nova";
    position:relative;
    color:white;
    margin-left:15px;
    margin-top:20px;
    top:-10px;
}
h1 {
    font-family: "Proxima Nova";
    color:black;
    position:absolute;
    font-weight:lighter;
    top:175px;
    left:300px;
    z-index:1;
}
h2 {
    font-family: "Proxima Nova";
    font-style:normal;
    color:black;
    font-weight:lighter;
    font-size:16px;
    position:absolute;
    top:220px;
    left:300px;
    max-width:700px;
    z-index:1; 
}

#Central_Why  {
    border-radius:15px;
    border:3px solid black;
    max-width:775px;
    position:absolute;
    top:300px;
    left:285px;
    z-index:0;
    border-color:black;
}
#Why_Body {
    position:absolute;
    font-family:"Proxima Nova";
    left:285px;
    top:630px;
    font-weight:lighter;
}

#Oktoberfest {
    position:absolute;
    font-family:"Proxima Nova";
    left:285px;
    top:690px;
    font-weight:lighter;
}

Answer 1

有几种解决方案。 一个简单的是@media查询。 这些询问浏览器它的大小，然后根据大小给它不同的指令

例如添加

@media screen and (min-width: 480px) {
    body {
    width: 600px;
    height:1000px;
   }
}

现在，您的屏幕将根据屏幕尺寸加载不同的高度和宽度。 您可以在此处阅读更多内容：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

以下是一组要处理的大小： https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

使用屏幕总是会有所不同，因此您必须建立预期，因此请通过调整浏览器大小或在 OYU 使用这样的网站更多地进入网页设计来测试它：http://quirktools.com/screenfly/

另外，我很抱歉所有的反对票。 这里的社区对新手并不友好。 这是一个了不起的资源，但更多的是经验丰富(/半有经验的(开发人员来相互支持。 我想文化已经发展起来，所以它不会变得像一所教授基础知识的学校。

作为一个因为我的问题我们没有得到好评而关闭多个帐户的人，我建议谷歌搜索一个论坛或 Slack 小组，专门针对刚开始获得建议和帮助的人，有很多开发人员渴望帮助那些刚刚开始的人