在引入响应式设计之前,网站通常都是固定宽度的,这意味着网站的设计无论在多大的屏幕上都是以相同的宽度显示。在智能手机出现后,这就真的行不通了,因为网站在小屏幕上显得很小,用户必须不断地进行缩放来阅读内容。 移动网站紧接着出现了,许多公司独立于它们的主站点(或称为桌面站点)创建了第二个网站。移动网站通常只包含主网站上的一小部分内容和功能,所以手机用户对其并不感冒。 随着越来越多的设备出现,设计师们很快意识到创建多个网站以适应每一种不同尺寸的屏幕,即使不是不可能的,也是不切实际的。响应式设计的概念被引入,它使得网站能够响应设备的宽度,并以一种适合于屏幕尺寸的方式来显示网站的内容。 响应式网页设计包含两个主要部分:灵活性,也就是说水平度量需要使用相对单位,比如百分比,这样它们才能对不同尺寸的屏幕做出响应;媒体查询,其允许你基于设备的屏幕宽度,用CSS 来改变网站的设计。响应式设计允许你只用一套代码就能为任意屏幕尺寸的设备提供一个合适的设计。不必维护多套不同的代码意味着更少的工作。同时,应用响应式设计意味着你的网站是为搜索引擎优化了的。 接下来,我们将在第2 章中介绍内容的重要性,以及如何确保设计出在响应式网站上有良好显示效果的内容。