响应式网页设计 - 网格视图
什么是网格视图？
许多网页都是基于网格视图的，这意味着页面被分为几列：
在设计网页时使用网格视图非常有用。它使在页面上放置元素变得更容易。
响应式网格视图通常有 12 列，总宽度为 100%，并且会随着您调整浏览器窗口大小而缩小和扩大。
放置您的广告！
构建响应式网格视图
让我们开始构建一个响应式网格视图。
首先确保所有 HTML 元素都具有 box-sizing 属性设置为border-box。这确保了填充和边框包含在元素的总宽度和高度中。
在您的 CSS 中添加以下代码：
* {
盒子尺寸：边框；
}
阅读更多关于 box-sizing 我们的财产CSS 盒子尺寸 章节。
以下示例展示了一个简单的响应式网页，包含两列：
25%
75%
如果网页仅包含两列，则上述示例就可以了。
但是，我们希望使用具有 12 列的响应式网格视图，以便对网页进行更好的控制。
首先我们必须计算一列的百分比：100%/12 列 = 8.33%。
然后我们为这 12 列分别创建一个类， class="col-" 以及一个数字，定义该部分应跨越多少列：
样式表：
.col-1 {宽度：8.33％;}
.col-2 {宽度：16.66%;}
.col-3 {宽度：25％;}
.col-4 {宽度：33.33%;}
.col-5 {宽度：41.66%;}
.col-6 {宽度：50%;}
.col-7 {宽度：58.33%;}
.col-8 {宽度：66.66%;}
.col-9 {宽度：75%;}
.col-10 {宽度：83.33%;}
.col-11 {宽度：91.66%;}
.col-12 {宽度：100％;}
亲自尝试 »
所有这些列都应向左浮动，并且填充 15px：
样式表：
[class*="col-"] {
向左飘浮;
填充：15px；
边框：1px 实心红色；
}
每行应包装在 <div>。行内的列数应始终等于 12：
HTML：
<div class="row">
<div class="col-3">...</div><!-- 25% -->
<div class="col-9">...</div><!-- 75% -->
</div>
行内的列全部向左浮动，因此脱离了页面流，其他元素将像不存在列一样放置。为了防止这种情况，我们将添加清除流的样式：
样式表：
.row::之后 {
内容： ””;
清楚：两者皆可；
显示：表格；
}
我们还想添加一些样式和颜色以使其看起来更好：
例子
html {
字体系列：“Lucida Sans”，无衬线；
}
.标题 {
背景颜色：#9933cc；
颜色：#fff；
填充：15px；
}
.菜单 ul {
列表样式类型：无；
边距：0；
填充：0；
}
.菜单 li {
填充：8px；
下边距：7px；
背景颜色：#33b5e5；
颜色：#fff；
盒子阴影：0 1px 3px rgba（0,0,0,0.12），0 1px 2px rgba（0,0,0,0.24）；
}
.menu li:悬停{
背景颜色：#0099cc；
}
亲自尝试 »
注意 示例中的网页在将浏览器窗口调整到非常小的宽度时看起来不太好看。在下一章中，您将学习如何修复该问题。
