响应完美的方块在一个固定的位置潜水.谁能帮助我

Question

我在我的网页底部有一个固定位置的div(仅面向移动设备)。里面我有5个链接，我希望这些链接总是完美的正方形，但我想避免使用任何固定的大小，所以我总是尝试使用"%"。这些正方形需要始终使用容器的全宽度分布。

html so simple:

<div class="container">
    <a href="#" class="facebook">                    
    </a>
    <a href="#" class="info">
    </a>
    <a href="#" class="contacto">
    </a>
    <a href="#" class="telefono">
    </a>
    <a href="#" class="galeria">
    </a>
</div>

和目前为止的css:

.container {
    width:90%;        
    height:20%;
    position:fixed;
    bottom:5%;
    left:5%;
    overflow:hidden;
}
.container a {
    width: 18.4%;
    margin-right: 2%;
    height:100%;
    background-color: blue;
    float:left;
}
.container a:last-child {margin-right: 0;}

这里有jsfiddle: http://jsfiddle.net/7jJsf/3/

那么，有可能使链接完美的正方形，无论宽度或高度浏览器有吗?

或者，如果我的方法不够好，还有其他方法吗?

注意:我想我可能可以在每个链接中使用一个方形图像，但我希望避免使用不必要的图像。

提前感谢并原谅我的英语，希望问题足够清楚

Answer 1

我已经在这里回答了这个问题。这个解决方案使用一个虚拟的div和position: absolute;来制作保持其长宽比的响应元素。这是一个CSS解决方案

为了适应你的情况，你可以这样做:

小提琴

HTML:

<div class="container">
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="facebook"></a>
    </div>
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="info"></a>
    </div>
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="contacto"></a>
    </div>
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="telefono"></a>
    </div>
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="galeria"></a>
    </div>
</div>

CSS:

.container {
    width:90%;
    position:fixed;
    bottom:5%;
    left:5%;
}
.container .wrap {
    float:left;
    position: relative;
    width: 30%;
    margin-right:1%;
    width: 18.4%;
    margin-right: 2%;
    height:100%;
    float:left;
}
.container .dummy {
    margin-top: 100%;
}
.container a {
    display:block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: blue;
}
.container>div:last-child {
    margin-right: 0;
}

Answer 2

我会将宽度和高度设置为视口宽度(视口宽度的百分比)，如下所示:

width:16vw;
height:16vw;

你小提琴

Answer 3

使用这个小技巧

.container a {
    margin-right: 2%;
    background-color: blue;
    float:left;
    position: relative;
    width: 18.4%;
    padding-bottom: 18.4%;
}