如何使这个响应？答案

【问题标题】：How to make this responsive?如何使这个响应？
【发布时间】：2014-01-01 22:45:36
【问题描述】：

对于我的一个网站，我必须使它具有响应性，但我不知道如何。我正在为容器 div 的高度而苦苦挣扎。这是 HTML：

<div class="container">
    <div class="vak1"></div>
    <div class="vak2"></div>
    <div class="vak3"></div>
    <div class="vak4"></div>
</div>

和css：

.container {
    margin-right: auto;
    margin-left: auto;
    position: relative;
    height: 456px;
    width: 742px;
    top: 15%;
}
.vak1 {
    width: 344px;
    height: 216px;
    background-color: #666;
    position: absolute;
    top: 65px;    
    left: 0px;
    float:left;
}
.vak2 {
    width: 230px;
    height: 129px;
    background-color: #666;
    position: absolute;
    top: 298px;
    left: 114px;
    float:left;
}
.vak3 {
    width: 305px;
    height: 211px;
    background-color: #666;
    position: absolute;
    top: 0px;
    right: 73px;
    float:left;

}
.vak4 {
    width: 380px;
    height: 225px;
    background-color: #666;
    position: absolute;
    bottom: 0;
    right: 0px;
    float:left;

}

做到这一点的最佳方法是什么，让它完全响应？

【问题讨论】：

你在为身高而苦恼吗？为什么所有的宽度都是像素？如果你要做出响应式的东西，那么使用像素是个坏主意。
阅读alistapart.com/article/responsive-web-design或搜索你会发现好文章，响应式的基本是使用%或em来定义容器宽度高度

标签： css html responsive-design

【解决方案1】：

你可以试试这个：DEMO

但我不确定为小屏幕设备保留这种结构是否是个好主意。

<div class="container">
<div class="cont">
    <div class="vak1"></div>
    <div class="vak2"></div>
</div>
<div class="cont">
    <div class="vak3"></div>
    <div class="vak4"></div>
</div>

更新：

Version 2 似乎更适合小屏幕设计

【讨论】：