CSS第三课 栅格系统
这一节内容我自己都觉得比较鸡肋,就当捧个场$_$,感兴趣的完全可以自行参考 uikit 和 bootstrap 的实现,以及二者的差异。
实现自己的栅格系统,实现响应式布局
利用栅格系统,完成设计稿的第二块区域。学有余力的同学,可以尝试再用inline-block
实现。
编写HTML
<section>
<div class = "container text-center">
<header class = "section__header">
<h2>WHY USE OUR PLATFORM</h2>
</header>
<ul class = "list-nostyle row">
<li class = "media--left col-md-4">
<img src = "">
<div class = "media__body">
<h3 class = "media__heading">……</h3>
<p>……</p>
</div>
</li>
……
</ul>
</div>
</section>
栅格系统
栅格系统的作用在于:
- 快速布局
- 可重用
- 响应式设计
如果用过Bootstrap,你就知道,Bootstrap采用了12列的栅格。其实你完全可以自由设计栅格的列数,12、16、24等等都是可以。
但是,你可能需要关注,960这个数字,很多网站默认的宽度都是960px:
之所以选择960是因为绝大多数显示器都是1024宽,那为了避免出现水平方向的滚动条,那就会采用一个比1024窄一点的宽度,而960正可以被很多数整除:
1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480, 960
对于布局来说,你可以选择更多的比例。
如果我们选择1000,相对就不是那么方便了:
1, 2, 4, 5, 8, 10, 20, 25, 40, 50, 100, 125, 200, 250, 500, 1000
现在我们来写一个栅格系统:
栅格系统的基本结构
在进行排版时,需要对水平轴划分,将相应的内容放到之前规划的位置。这就是我们看到的row(行)
和column(列)
,column
作为row
的子元素;
html结构:
<div class = "row">
<div class = "col-x">
</div>
</div>
有的栅格系统还会用一个container
将row
包裹起来,这不是必须的,如果你没有特殊的需求,放心大胆的直接用row
和column
。在bootstrap
中,row
需要被container
包裹,看下源码,想想为什么Bootstrap这么设计:
.container
{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.row {
margin-right: -15px;
margin-left: -15px;
}
定义列Column
我们这里采用12列的栅格系统,行用.row
来控制,列column
我们参考Bootstrap的命名,col-md-x
。
其中,x
代表1~12
的数字,xs,sm,md,lg
匹配不同屏幕大小:
采用float
:
[class ^= "col-"]{
float: left;
list-style: none;
}
.col-md-12{
width: 100%;
}
.col-md-11{
width: 91.66666667%;
}
.col-md-10{
width: 83.33333333%;
}
.col-md-9{
width: 75%;
}
.col-md-8{
width: 66.66666667%;
}
.col-md-7{
width: 58.33333333%;
}
.col-md-6{
width: 50%;
}
.col-md-5{
width: 41.66666667%;
}
.col-md-4{
width: 33.33333333%;
}
.col-md-3{
width: 25%;
}
.col-md-2{
width: 16.66666667%;
}
.col-md-1{
width: .083333333%;
}
对所有的col
都添加了list-style: none
,兼容<li>
的情况。
清除浮动
这次我们采用clearfix
实现:
.row:before,
.row:after{
content: '';
display: block;
}
.row:after{
clear: both;
}
完善栅格
现在你已经可以使用栅格系统完成布局了:
但是还有两点需要处理:
- 在栅格之间增加间隔:我们很多时候都需要栅格之间要有一定间隔,而不是两个紧挨着。
- 移动适配:我们的布局应该能适应不同屏幕的大小
增加间隔
并不是所有的栅格之间都需要间隔,所以没有间隔的栅格也是需要保留的。那就新增一个类来控制有间隔的栅格:
.row-divider > *{
padding-right: 1.6%;
padding-left: 1.6%;
}
为了避免重新计算宽度所占的百分比,这里我们使用了padding
。
移动适配
可以采用两种实现方案,一种是根据屏幕大小来调整col-
的宽度,另外一种是根据屏幕大小应用不同的class
。两种方法其实都很简单,直接上代码:
1. 调整col-
宽度
.col-6{
width: 50%;
}
@media all and (max-width: 750px){
width: 100%;
}
这里只是给出了最简单的演示,很多时候,我们需要设置多个阈值,并且还要考虑最后一个元素是否会溢出的问题,这些需要提前计算好。
2. 应用不同的class
/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
这里直接粘贴了Bootstrap的代码,很简单是吧,相比第一个解决方案,这样更好控制。
完成剩下的工作
这是我们最后的效果,尝试下自己完成:
- 图片、文字左右布局
- 图片和文字垂直居中
- 当文字过多时,用
...
表示