揭秘CSS(第 1 版)
9.4.2 弹性网格
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

基本布局类型

多列布局

弹性布局盒模型

响应式布局

媒体查询

弹性网格

当页面需要适应各种尺寸的设备时,就应该使用弹性网格,让整个布局结构根据用户行为,以及设备环境进行响应式调整。

弹性网格是一个网格系统,它参考流式布局中网格系统的设计,将每个格子设置为百分比宽度,以便网格的宽度会随时根据浏览器窗口大小做出相应的调整。

那如何将固定宽度的网格系统,转换成弹性网格系统对应的百分比宽度呢?响应式设计之父 Ethan Marcotte 提供了一个简单易行的公式:

目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度

先不要被这个公式吓到,在创建响应式布局时,它很快就会成为你的得力助手。先看看下面的设计,如何把它从固定宽度转换为百分比宽度:

<body>
<div id="wrapper">
    <main></main>
    <aside></aside>
</div>
</body>

这个页面相对简单,在一个 id = "wrapper" 的容器中,包括主内容区 main 和侧栏 aside两部分。采用固定布局的CSS代码如下:

#wrapper {
    margin: 10px auto;
    width: 1000px;
}
aside {
    width: 200px;
    float: left;
}
main {
    width: 780px;
    float: right;
}

上述代码中的所有尺寸,都使用像素值。页面的所有内容都包裹在一个 id = "wrapper" 的div 容器中,div 被设置为居中显示。容器的宽度为1000px,main 和aside 的宽度分别为 780px 和 200px。

要将固定宽度的网格系统,转换成弹性网格系统。首先,以视口的总宽度为基准,把页面容器的宽度转换为百分比宽度。然后,再以容器的宽度为基准,把子元素的固定像素宽度,转换为对应的百分比宽度。

现在,可以使用上面的公式,将固定宽度改成百分比宽度。外层的容器,将以窗口的总宽度为基准,定义其百分比宽度。假设对于宽度为 1024px 的屏幕,套用上面的计算公式,计算百分比宽度:

1000px ÷ 1024px = 97.65625%

得到的准确宽度为97.65625%,这样的话,得到的宽度跟固定宽度将完全相同。当然,你也可以选择 100% 或者 96%,以保证达到最佳的视觉效果。

接下来,再将里层的元素从固定宽度转换为百分比布局,由于 main 和aside 都包裹在#wrapper容器中,此时,main 和 aside 就是目标元素,#wrapper 则是上下文元素。得到 main 的百分比为:

780px ÷ 1000px = 78%

同理,计算出 aside 的百分比为 20%。经过上述一番转换之后,页面的基本结构都变成了百分比布局,相应的CSS代码如下:

#wrapper {
    margin: 10px auto;
    width: 97.65625%;
}
aside {
    width: 20%;
    float: left;
}
main {
    width: 78%;
    float: right;
}

如果 main 和 aside 也包含子元素,则使用相同的方法进行计算,只是上下文元素会随之发生改变。对于 main 的子元素,上下文元素就是 main 元素,对于 aside 的子元素,上下文元素就是 aside 元素,依次类推。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验