夏树的网页设计篇 – 栅栏布局整理

0.写在前面

早些时候, 栅栏布局(也称栅格系统)是内置于Bootstrap的一套响应式、移动设备优先的流式布局,之后也被其他前端框架所应用。响应式栅栏布局的使用让应用该布局的元素随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列,便于网页的分块排版。不过仅仅是为了使用栅栏布局便引入一整套前端框架,显然是考虑欠妥的,作为一篇笔记存档,本文将在下面的内容里整理介绍独立的响应式栅栏布局。

css-grid-layout

1.简介及注意事项

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。

有一下几个注意点:

  1. “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
  2. 通过“行(row)”在水平方向创建一组“列(column)”,你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
  3. 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了 padding
  4. 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
  5. 当column设置 padding 后,发现内容又另起一行时,应该考虑添加 box-sizing: border-box; (将padding由外扩变为内缩)
  6. 栅格类适用于与屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-lg-* 不存在, 也影响大屏幕设备。

2.简易栅栏布局

2.1.容器

包括.container(固定宽度) ,.container-fluid(100%宽度), .row(行)三种容器(下面应该还有.col-*(列))

根据注意点中的第1条, .row必须包含在.container.container-fluid

.container{
	width: 1120px;
	margin: 0 auto;
	padding: 0 15px;
}
.container-fluid {
	margin: 0 auto;
	padding: 0 15px;
}
.row {
	margin: 0 -15px;
}

2.2.列(column)

一个行(row)将会被最多分为12列, 可以设置不同比例的.col-*(列)实现对单行分块的排版。

根据注意点中的第2条, 列.col-*需要被包括在行.row中, 而你的内容应当被你放置在.col-*

通过设置box-sizing: border-box;来确保padding由外扩变为内缩, 防止列元素 “另起一行” 。

[class*='col-']{
	float: left;
	position: relative;
	min-height: 1px;
	padding: 0 15px;
	box-sizing: border-box;
}
.col-xs-12 {
	width: 100%;
}
.col-xs-11 {
	width: 91.66666667%;
}
.col-xs-10 {
	width: 83.33333333%;
}
.col-xs-9 {
	width: 75%;
}
.col-xs-8 {
	width: 66.66666667%;
}
.col-xs-7 {
	width: 58.33333333%;
}
.col-xs-6 {
	width: 50%;
}
.col-xs-5 {
	width: 41.66666667%;
}
.col-xs-4 {
	width: 33.33333333%;
}
.col-xs-3 {
	width: 25%;
}
.col-xs-2 {
	width: 16.66666667%;
}
.col-xs-1 {
	width: 8.33333333%;
}

2.3.清除浮动

由于栅栏布局是通过设置浮动float实现的, 为了防止容器内元素高度塌陷以及内容被其他元素侵入, 你需要通过设置clear: both;来实现

在这里我们对已知的容器进行设置清除浮动, 对于未知的容器, 你也可以通过添加.clearfix这个类达到清除浮动的目的。

.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
	content: " ";
	display: table;
	clear: both;
}

3.响应式

通过第2部分的代码, 你已经可以实现了栅栏布局的基本功能, 但是在注意点6我们提到栅栏布局对不同类型设备都能适用, 在需要对不同类型的设备显示不同的布局时, 你可以参考以下的内容。

3.1.移动设备友好

为了确保适当的绘制和触屏缩放, 需要在<head>之中添加 viewport 元数据标签:

<meta name="viewport" content="width=device-width, initial-scale=1">

而针对移动设备, 有时你需要禁止用户缩放屏幕, 只能滚动屏幕, 这时候你可以对 viewport 元数据标签设置user-scalable=no属性, 这样可以让你的网站更有原生应用的感觉, 而禁止缩放的功能还需要视情况而定, 并不是所有网站都适用该功能。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

3.2.媒体查询

为了实现栅栏布局对不同设备的适用, 媒体查询的方式可以让你针对不同的设备定义不同的分界点阈值:

针对于超小屏幕(手机,小于 768px), 栅栏布局并没有任何相关的媒体查询代码, 因为前文我们提到了这种布局是移动设备优先的。

针对于小屏幕(平板,大于等于 768px):

@media (min-width: 768px) {
	.col-sm-12 {
		width: 100%;
	}
	.col-sm-11 {
		width: 91.66666667%;
	}
	.col-sm-10 {
		width: 83.33333333%;
	}
	.col-sm-9 {
		width: 75%;
	}
	.col-sm-8 {
		width: 66.66666667%;
	}
	.col-sm-7 {
		width: 58.33333333%;
	}
	.col-sm-6 {
		width: 50%;
	}
	.col-sm-5 {
		width: 41.66666667%;
	}
	.col-sm-4 {
		width: 33.33333333%;
	}
	.col-sm-3 {
		width: 25%;
	}
	.col-sm-2 {
		width: 16.66666667%;
	}
	.col-sm-1 {
		width: 8.33333333%;
	}
}

针对于中等屏幕(桌面显示器,大于等于 992px):

@media (min-width: 992px) {
	.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: 8.33333333%;
	}
}

针对于大屏幕(大桌面显示器,大于等于 1200px):

@media (min-width: 1200px) {
	.col-lg-12 {
		width: 100%;
	}
	.col-lg-11 {
		width: 91.66666667%;
	}
	.col-lg-10 {
		width: 83.33333333%;
	}
	.col-lg-9 {
		width: 75%;
	}
	.col-lg-8 {
		width: 66.66666667%;
	}
	.col-lg-7 {
		width: 58.33333333%;
	}
	.col-lg-6 {
		width: 50%;
	}
	.col-lg-5 {
		width: 41.66666667%;
	}
	.col-lg-4 {
		width: 33.33333333%;
	}
	.col-lg-3 {
		width: 25%;
	}
	.col-lg-2 {
		width: 16.66666667%;
	}
	.col-lg-1 {
		width: 8.33333333%;
	}
}

3.一些参考

列出在整理本文时候的一些参考:

(完)

发布者

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注