制作自己的栅格系统 CSS
制作自己的栅格系统 CSS
响应式设计
在谈论栅格系统之前,我们先了解一下,响应式设计。简单来说,我们在设计的页面的时候,并不知道我们的页面会在什么设备呈现,为了在不同的设备上有最好的呈现效果,我们需要作出一些响应和调整。
响应式 Web 设计(Responsive Web design)的理念是,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
响应式设计有几个比较重要的点,包括:
viewport
:让页面宽度等于设备宽度流式布局:百分比和浮动
@media
:断点
栅格系统
为了能够更好的使用响应式设计,栅格系统应运而生。通过栅格系统,可以在切分的网格里按顺序叠加不同的宽度,并且易于管理。这样做的好处是显而易见的:
提高生产力,通过在网格的划分,元素更容易堆放而且在跨浏览器上面具有一致性,使我们可以专心的注意布局而不是兼容上。
具有灵活性,无论是什么样的布局,都可以拆分到粒度为一个网格的大小。
支持响应式设计,栅格系统本身能很好的和响应式设计结合在一起,或者说,我们的栅格系统是基于响应式设计的。
栅格系统的实现
Container
一个用于摆放栅格系统的容器。通常我们希望这个容器占满整个整个页面,除非显示设备特别大,这个时候定一个最大宽度,则
.container { width: 100%; max-width : 1200px; }
Row
用于防止里面的列( column )溢出到其他的行。通常会需要清除浮动,因为我们是通过浮动来制作栅格系统的。
.row:before,.row:after { content: ""; display: table; clear: both;}
Column
栅格系统的核心,规定了列的宽度,位置和间隔。而在此之前,我们需要规定所有的盒子模型为 border-box
类型,这样做的原因是避免繁琐的计算和更简单的分列。(当然你也可以让页面上所有的盒子模型都设置为 border-box
。)
.container * { box-sizing: border-box}
这里我们把每一行分成 6 列,通过将其设置为浮动且百分比,能够很好的制作响应式页面。
[class *= 'col-'] { float: left; min-height: 1px; padding: 12px; /* 设置间距 */ }.col-1 { width: 16.66%; } .col-2 { width: 33.33%; } .col-3 { width: 50%; } .col-4 { width: 66.664%; } .col-5 { width: 83.33%; } .col-6 { width: 100%; }
Responsive
到此为止,我们的栅格系统已经设置的差不多了,为了支持响应式设计,参考 boostrap 的设置,我们可以给不同列设置不同的断点,这里以实现 md
和 sm
两种界限为例子:
@media all and (min-width: 769px) { .col-md-1 { width: 16.66%; } .col-md-2 { width: 33.33%; } .col-md-3 { width: 50%; } .col-md-4 { width: 66.664%; } .col-md-5 { width: 83.33%; } .col-md-6 { width: 100%; }}@media all and (max-width: 768px) { .col-sm-1 { width: 16.66%; } .col-sm-2 { width: 33.33%; } .col-sm-3 { width: 50%; } .col-sm-4 { width: 66.664%; } .col-sm-5 { width: 83.33%; } .col-sm-6 { width: 100%; }}
暂无评论
发表评论