最新的Web开发教程
 

自适应网页设计 - 网格视图


什么是网格视图?

许多网页是基于网格的图,这意味着该页面被分为列:


使用网格视图设计网页的时候非常有帮助。 它可以更容易地放置在页面上的元素。


回应式网格视图通常有12列,并拥有100%的总宽度,并缩小和扩大,因为你调整浏览器窗口。

响应网格视图


建立一个响应网格视图

让我们开始建设一个负责任的网格视图。

首先确保所有的HTML元素都具有box-sizing属性设置为border-box 。 这可以确保在填充和边界都包含在元素的总宽度和高度。

添加以下代码在你的CSS:

* {
    box-sizing: border-box;
}

了解更多关于box-sizing在我们的财产CSS3框大小调整的篇章。

下面的例子显示了一个简单响应的网页,有两列:

.menu {
    width: 25%;
    float: left;
}
.main {
    width: 75%;
    float: left;
}
试一试»

上面的例子是好的,如果该网页只包含两列。

但是,我们要使用一个负责任的网格视图有12列,有过网页更多的控制。

首先,我们必须计算为一列的比例:100%/ 12 =列8.33%。

然后,我们做一个类每12列, class="col-"等一批定义部分应跨的列数:

CSS:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
试一试»

所有这些列应是浮动到左边,并有15px的的填充:

CSS:

[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
}

每一行应该被包裹在一个<div> 列的行内的数字应该总是添加最多12个:

HTML:

<div class="row">
  <div class="col-3">...</div>
  <div class="col-9">...</div>
</div>

一行内的列都浮动到左侧,并且因此取出页的流动,和其他元素将被放入仿佛列不存在。 为了防止这种情况,我们将添加清除流动的风格:

CSS:

.row::after {
    content: "";
    clear: both;
    display: block;
}

我们还需要添加一些的款式和颜色,使其更好看:

html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
试一试»

注意,当您调整浏览器窗口,以非常小的宽度在例如网页不好看。 在下一章中,您将学习如何解决这个问题。