如何在手机浏览器中使用全部空间

Question

我希望我的网站能够响应与桌面版相似的智能手机浏览器。我的意思是所有元素必须保持在相同的位置（元素缩放到浏览器窗口）。 我用下面的例子说明了它：

帮助我用CSS和HTML实现这一目标。如果问题似乎太长，无法解释，请提供帮助我这样做的链接。提前谢谢！

Answer 1

Here是我为你创建的一个jsfiddle。

body, html {
    margin: 0;
    padding: 0; /*some resets */
}
* {
    box-sizing: border-box;
}

header, footer, .container {
    border: 1px solid grey;
}

.middle {
    width: 33.33%;
    background-color: red;
    border: 1px solid white;
    float:left;
    text-align: center;
    height: 300px;
}

.clear{
    clear:both;
}

<header>Some header text</header>
<div class="container">
    <div class="middle">Text</div>
    <div class="middle">is</div>
    <div class="middle">here</div>
    <div class="clear"></div>
</div>
<footer>Some footer text</footer>

您需要使用百分比才能在所有设备上使用相同的效果。