创建响应式网页需要进行哪些调整？

Question

我对编码还很陌生，所以我知道它远非完美！我只是在寻求一些帮助，让这个页面在移动设备上看起来不错 phone。最有可能的是，文字和图片会叠加；我不确定如何处理页眉和页脚。

<body>
<h1 div id= "header"> </h1>
<div id="logos"> <img id="logo" src= "https://msu.edu/~donald88/portfolio/logo02.png" </div>
<ul id="navigation"> 
<li> <a href= "http://kelsiedonaldson.com."> About</a></li>
<li> <a href= "http://kelsiedonaldson.com/portfolio.html"> Portfolio</a></li>
 <li> <a href= "http://kelsiedonaldson.com/resume.html"> Résumé</a></li>
 <li> <a href= "http://kelsiedonaldson.com/contact.html"> Contact</a></li>
</ul>
<h2> Project Spotlight </h2>
<h3> Refugee Development Center Newsletters </h3>
</br> </br>
<div id= "main">
<div class="project-image"><img src= "https://msu.edu/~donald88/portfolio/rdcnewslettertwo.png" alt="RDC newsletter" /></div>
<div id="spotlight-text"> <p class="project-text"> This is a project I did in a class during my freshman year of college. A member of the RDC staff came to my class to 
give a general overview of what she wanted, and then we divided into teams to design two newsletters for this awesome organization. My team
consisted of three members, and we all worked together to write and design the newsletters. I specifically wrote the story pictured on the 
left in the summer 2016 newsletter about the GLOBE camp program. I also helped collaborate on the design of both newsletters as far as color choice,
text formatting, and article length. I then edited my other team members' articles and helped assemble everything as a PDF that could be printed
or looked at online. Finally, my team gave a presentation to the rest of my class and the RDC staff member about our newsletter and the choices
we made while creating it. The client only had positive things to say about our design! </p>
<p class="project-text"> Completed: April, 2016 <br/>
 Category: Web/Print </p>
</div>
<div class="back-button"> <a href= "http://kelsiedonaldson.com/portfolio.html"> Back to portfolio </a> </div>
<div class="portfolio-button"> <a href= "http://kelsiedonaldson.com/rdc_newsletters.pdf" target="_blank"> See full project </a> </div>
</div>
</p>
 <div style="clear: both"></div>
<div style="clear: both"></div>

<footer class="footer">
  <div class="container">
    <div id="ftr-wrap">
        <div class="ftr-links">
        <div class= "table">
            <ul>
               <li><a href="https://twitter.com/Kelsdonaldson22"> <div class="icons"><img src= "http://icons.iconarchive.com/icons/limav/flat-gradient-social/256/Twitter-icon.png"></div></a></li>     
               <li><a href="https://www.facebook.com/kelsie.donaldson"><div class="icons"><img src= "https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png"></div></a></li>     
               <li><a href="https://www.instagram.com/kelsiedonaldson/"><div class="icons"><img src= "http://3835642c2693476aa717-d4b78efce91b9730bcca725cf9bb0b37.r51.cf1.rackcdn.com/Instagram_App_Large_May2016_200.png"></div></a></li>
            <li><a href="https://www.linkedin.com/in/kelsie-donaldson-965033115?trk=hp-identity-name"><div class="icons"><img src= "https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/linkedin-512.png"</a></div></li>
            </div>
           </ul>
        </div>
        <div class="copyright-amazon">
            <p class="copyright">&copy; Copyright Kelsie Donaldson 2016</p>
             <p class="amazon"><a href="https://www.instagram.com/kelsiedonaldson/"><img 
        </div>     
    </div>
  </div>
</footer>

CSS:

Body {
background-image: url("http://www.publicdomainpictures.net/pictures/140000/velka/grey-white-background.jpg");
width: 100%;
}

html {
position: relative;
min-height: 100%;
}

#header {
height: 120px;
width: 100%;
min-width: 1200px; 
background-color: #b196db;
text-align: center;
font-family: 'Yesteryear', cursive;
margin: 0px;
padding-top: 20px;
padding-bottom: 20px;
line-height: 120px;
font-size: 100px;
position: relative;
}
#logo {
height: 110px;
max-width: 880px;
padding: 30px;
padding-top: 10px;
padding-bottom: 28px;
margin-top: -10em;
margin-left: auto;
margin-right: auto;
display: block;
position: relative;
}


#navigation li {
display: inline;
list-style-type: none;
padding: 50px;
float: center;
text-decoration: none; }

   #navigation {
text-align: center;
min-width: 1160px;
height: 30px;
background-color: #35b7ab;
margin-top: 0px;
top: 140px;
padding-top: 15px;
font-family: Lucida bright;
font-size: 20px;
color: white
}
 a {
    text-decoration: none;
    color: white;
}
 a:hover{
color: #867289; }

    h2 {
font-size: 50px;
color: #66096c;
font-family: 'Philosopher', sans-serif;
text-align: center; }

   html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; }

  body {
padding:0;
margin: 0;
}

.footer {
position: absolute;
margin-bottom: -30;
margin-top: 10px;
bottom:0;
width:100%;
min-width: 1200px;
background-color: #b196db;

}

.footer p {
color: #fff;
font-size:1em;
display: inline-block;
position: relative;
bottom: 10px;
float: right; 
}


.container {
max-width: 1674px;  /* adjust to allow for padding as needed */
padding:0 50px; }


    #ftr-wrap {
display:table;
table-layout:fixed;
width:100%;
margin:0 auto; }

  #ftr-wrap > div:nth-child(1) {text-align:left;}
#ftr-wrap > div:nth-child(2) {text-align:center;}
#ftr-wrap > div:nth-child(3) {text-align:right;}

.ftr-links ul {
  padding: 0;
 display: inline-block;
 position: relative;
 margin: auto;
 width: 100%; }


.table {
position: relative;
display: table;
margin: 0 auto;
display: inline-block;
list-style: none;
margin-left: 45%;
bottom: -50; }

.ftr-links ul li {
 display: inline-block;
  padding-right: 15px;
 font-size:.75em; }

.ftr-links ul li a {
display: inline-block;
color: #fff;
margin: 0; }

.icons > img {
display: inline;
height: 40px;
width: 40px;
padding-bottom: 20px; }

   #main{
height:800px;
width:100%; 
}

#main {
height:500px;
width:100%;
}

 .project-image{
width:40%;
color: #66096c;
height:100%;
float:left;
margin-left: 7em; 
padding-right: 3em;
}

 div#spotlight-text {
width:40%;
height:100%;
float:left;
font-family: Lucida Bright;
font-size: 20px;
color: #66096c; 
margin-right: 2%;
}
    h3 {
font-size: 30px;
color: #867289;
text-align: center;
font-family: Lucida Bright;

Answer 1

我知道您希望您的页面在缩小到移动设备时看起来更好，但如果您想实现这一点，我强烈建议您查看 Media Queries

他们可以帮助您完成您正在寻找的东西。另外，请不要忘记在使用媒体查询时将其放在 HTML 文档中 head 标记的结尾处。

<meta name="viewport" content="width=device-width, initial-scale=1">

创建响应式网页需要进行哪些调整？

What tweaks are necessary to create a responsive web page?

html

css

responsive