CSS3 响应式布局之弹性网格

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

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

那如何将固定宽度的网格系统，转换成弹性网格系统对应的百分比宽度呢？响应式设计之父 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 上开源。

CSS3 响应式布局之弹性网格相关推荐

html响应式弹性布局,CSS3响应式布局之弹性盒子
CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...
html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
html5/css3响应式布局介绍
转载链接:http://www.51xuediannao.com/html+css/htmlcssjq/694.html html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流 ...
Henry前端笔记之响应式布局与弹性布局
Henry前端笔记之响应式布局与弹性布局弹性布局 Rem布局的原理解析(em 与 rem区别 ): rem如何实现自适应布局使用CSS3 REM 和 VW 打造等比例响应式页面的便捷工作流从网易 ...
php响应式布局,响应式布局之弹性布局的介绍
响应式布局的实现是前端工程中一个非常大的跨越,它非常灵活的可塑造性使得同一个网站能在不同的终端设备上展现出不同的活力.就今天这个机会,我想与大家分享并探讨一些常用来实现响应式布局方法中的弹性布局. 弹 ...
浅谈CSS3 响应式布局--Media Queries
CSS3 Media Queries , CSS3媒体查询.使用 @media 查询,你可以针对不同的媒体类型定义不同的样式:也可以针对不同的屏幕尺寸设置不同的样式:当重置浏览器大小的过程中,页面也会 ...
CCS3的过渡、变换、动画以及响应式布局、弹性布局
CSS3 过渡 .变换.动画在没有CSS3之前,如果页面上需要一些动画效果,要么你自己编写 JavaScript,要么使用 JavaScript 框架(如 jQuery)来提高效率. 但是CSS3出 ...
响应式布局，弹性布局
响应式 Web 设计 - Viewport 响应式布局是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本. 优点: 面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点: 兼容 ...
静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC
静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...

CSS3 响应式布局之弹性网格

CSS3 响应式布局之弹性网格相关推荐

最新文章

热门文章