Question

20世纪90年代末，我刚学习做网页的时候，页面布局结构都是基于表格的。通常，屏幕上显示的各部分元素都是百分比宽度。例如，左侧的导航栏可能占据20%的屏幕宽度，主内容区占据80%。那时的浏览器视口还没有像今天这样天差地别，所以表格式布局在有限范围的视口中表现良好且能自由伸缩。没人太在意某些句子在不同大小的屏幕上效果不一样。不过，随着CSS的兴起，网页设计也更加接近印刷设计，很多人（包括我）开始使用固定的基于像素的布局，而基于百分比的布局逐年减少。

所有伟大的设计和思想，都会卷土重来。迷你车、烫发（我喜欢）以及喇叭牛仔裤都在多年沉寂后卷土重来。现在，轮到百分比布局方法上演王者归来了。

本章内容

理解为什么响应式设计需要百分比布局

将元素的固定像素宽度转换为百分比宽度

将文字的固定像素大小转换为等量的相对尺寸

理解如何找到任意元素的上下文

学习如何使图片平滑缩放

学习如何为不同的大小的屏幕提供不同的图片

学习如何让媒体查询与弹性图片及流式布局协同工作

使用CSS网格系统从头创建一个响应式布局