响应式设计入门-03 拥抱流式布局.pptVIP

拥抱流式布局 本章内容 理解为什么响应式设计需要百分比布局 将元素的固定像素宽度转换为百分比宽度 将文字的固定像素大小转换为等量的相对尺寸 理解如何找到任意元素的上下文 学习如何使图片平滑缩放 学习如何为不同的大小的屏幕提供不同的图片 学习如何让媒体查询与弹性图片及流式布局协同工作 使用 CSS 网格系统从头创建一个响应式布局 即使在最近，当我们针对某个特定的流行设备如 iPad 或者 iPhone，使用媒体查询来制作修正版的布局时（类似第 2 章的例子），仍然是基于已知的视口宽度使用固定像素尺寸。 但是，这种方法不是一种完全兼容未来的网页制作方法。未来，还会出现更多大小不一的视口，我们需要一些适应未知设备的方法。 为什么响应式设计需要百分比布局 在认识到媒体查询威力无比的同时，我们也要看到它的局限性。那些仅使用媒体查询适应不同视口的固定宽度设计，只会从一组 CSS 媒体查询规则突变到另一组，两者之间没有任何平滑渐变。 我们需要将固定像素布局转换成灵活的百分比布局。这样才能让页面元素根据视口大小在一个又一个媒体查询之间灵活伸缩修正样式。 使用百分比布局创建流动的弹性界面，同时使用媒体查询来限制元素的变动范围。将这两者组合到一起构成了响应式设计的核心。 将网页从固定布局修改为百分比布局 当前，我们通常是在Photoshop、 Fireworks 等软件制作的设计图中（基于像素单位）