如何制作一个完全响应的网页[关闭]答案

【问题标题】：How to make a fully responsive web page [closed]如何制作一个完全响应的网页[关闭]
【发布时间】：2013-09-22 03:55:59
【问题描述】：

我正在构建一个带有两个 div 的简单网页：

<body>
  <div id="content"><img src="img/Apples.jpg"></div>
  <div id="footer"><p>Some words!</p></div>
</body>

“content” div 必须始终位于“footer” div 上方，并且两个 div 必须始终显示在每个页面大小上。
我该怎么做？

谢谢！

这是我的 CSS：

body {
    padding: 18px;
}

#content {
    /*width: 70%;*/
    height: 70%;
    display: block;
    margin: auto;
}

#content img {
    width: 100%;
    height: auto;
}


#footer{
    /*width: 30%;*/
    height: 30%;
    display: block;
    margin: auto;
}

#footer p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

更新：

这是我的解决方案：

HTML：

<body>
    <div id="content"></div>
    <div id="footer"><p>Some words!</p></div>
</body>

样式表：

body {
    padding: 20px;
}

#content {
    width: 100%;
    background-image: url('img/Apples.jpg');
    background-size: cover;
    background-position: center;
    height: 570px;
    margin-bottom: 10px;
}

#footer{
    height: 100%;
    border-style: double;
    border-color: black;
}

#footer p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Landscape phones and down */
@media (max-width: 340px) { 
    #content {
        height: 370px;
    }
}

/* Landscape phone to portrait tablet */
@media (min-width: 340px) and (max-width: 500px) { 
    #content {
        height: 215px;
    }
}

/* Landscape phone to portrait tablet */
@media (min-width: 501px) and (max-width: 767px) { 
    #content {
        height: 660px;
    }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 801px){
    #content {
        height: 870px;
    }
}

但我无法调整每个设备的布局。我该怎么做？

【问题讨论】：

你会明白，如果你不应用样式表，你会得到。
这个问题太笼统了。你可能会考虑做一些研究并尝试一些东西。然后发布您尝试过的、您期望的以及出了什么问题。
要求代码的问题必须表明对正在解决的问题有最低限度的了解。包括尝试的解决方案、它们为什么不起作用以及预期结果。另见：Stack Overflow question checklist
What have you tried? Stackoverflow 可以帮助您解决当前遇到的开发问题。请参阅FAQ#dontask 了解更多信息。
我已经添加了我的样式表。

标签： html css responsive-design media-queries

【解决方案1】：

<body>
  <div id="content" style="height:70%;display:block;"><img src="img/Apples.jpg"></div>
  <div id="footer" style="height:30%;display:block;"><p>Some words!</p></div>
</body>

【讨论】：