TanXinNiao
commented
3 years ago 小设备上的大布局
我们在这里以 iPad和 iPhone作为目标设备，但背后的概念同样适用于其他平板电脑和 智能手机。首先，让我们在小屏幕上看一看第 7章的页面（固定宽度 980像素布局）。 iPad 屏幕尺寸是 1024×768 像素，由于页面布局宽度为 980 像素，因而在横向（水 平）的时候恰好能容纳布局（见图 8-1）。当把 iPad竖过来（垂直）以后，页面布局 就放不开了。
iPad和 iPhone会自动缩小页面以填满屏幕，但页面布局在 iPhone的小屏 幕上根本没法看。特别是文字太小了。用户必须通过扩展手势来放大页面，以便看 清文字。只是这样一来，每次都只能看到屏幕中的一小块地方。在竖屏的时候，也 就是用户自然而然地把握手机的情况下，页面还会更小。
很明显，一种布局不能适应多种屏幕尺寸。我们需要一种能够检测屏幕大小的方法， 然后相应地修改布局。简言之，就是需要让页面能够自己响应屏幕变化。下面我们 就来看一看实现这一点需要哪些技术。首先就是媒体查询。
响应式设计的要素 响应式设计包含三个重要的方面。 媒体查询：是一种 CSS 语法，可以根据浏览器的特性，一般是屏幕或浏览器容器宽度提供 CSS 规则； 流式布局：是使用 em 或百分比等相对单位设定页面总体宽度，让布局能够随屏幕大小而 缩放； 弹性图片：是使用相对单位确保图片再大也不会超过其容器。
今天的网页布局必须能根据它自己所处的不同环境作出响应。大屏幕上的最佳体验 和手机中的最佳体验有着天壤之别。在大屏幕上，可能使用多栏布局效果很不错， 但多栏布局到了手机上，每一栏都会窄得没法看。此时，所有内容“鱼贯而行”，即 用一个栏来组织成了唯一可行的方案。这样，用户使用简单的扫屏手势，就可以轻 松自如地滚动屏幕来阅读了。
实际上，使用一项叫媒体查询的 CSS 功能，很容易检测出用户设备的屏幕大小。然 后，据以提供替代或额外的 CSS，可针对相应屏幕实现更加优化的体验。使用这种 方式创建对设备有感知力的网站，被称为响应式设计。