css - 用于微小 (400*800) 分辨率的自定义列

Question

基金会的网格系统给我留下了深刻的印象。 我正在设计一个布局，其中我需要 12 列来实现 400px 宽的屏幕分辨率。就像一部小手机。 现在 foundation 不给我小专栏 小是我得到的最好的。 那么我如何为特定的分辨率设置特定的列大小，比如很小？ 谢谢

Answer 1

当更小的列变得不合理时，网格会优雅地缩小到一定程度。

http://jsfiddle.net/LV339/2/

html:

<div class="row">
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
</div>

CSS:

.row{
    max-width:400px;
}
.columns{
    height:500px;
}
.columns:nth-child(odd){
    background:red;
}
.columns:nth-child(even){
    background:blue;
}