响应式Web设计简介

越来越多的人使用小屏幕设备上网，针对不同屏幕的设备开发不同的页面成本非常大，这时，响应式Web设计应运而生。响应式Web设计（Responsive Web Design）是由Ethan Marcotte在2010年提出的，他将媒体查询、栅格布局和弹性图片合并称为响应式Web设计。

1.设计理念

从设计理念看，响应式Web设计是一种针对任意设备对网页内容进行完美布局的显示方式，与原始设计方式相比有以下两点突破。

（1）一个网页设计，多个设备使用

随着移动产品的日益丰富，出现了各种屏幕尺寸的手机、Pad等移动设备，而针对每一种尺寸的设备都独立开发一个网站，成本会非常高，如果要找一个成本、设计、性能的平衡点，响应式设计是最好的选择。它可以做到一处设计，响应多种屏幕。

（2）移动优先

以前的网站开发大多数是先开发PC端，再根据PC端的网页及功能设计开发移动端。然而，随着互联网行业的发展，使用移动端上网的用户群已经赶超PC端。由于移动端设备的屏幕小、计算资源低，如果我们先开发移动端，再开发PC端，可以迫使开发人员在更小、计算资源更低的设备中设计产品功能。这样做，一是可以使产品功能更加核心和简洁，二是有助于设计出性能更高的程序。

2.用户体验

用户体验对于网站的运营是至关重要的，网站如果没有良好的用户体验，那么就算里面的内容再精彩，用户也无心浏览下去。通常，网站会在移动浏览器上缩放，这样虽然可以完整地给我们呈现想要浏览的内容，但鉴于移动设备屏幕大小的限制，过多的内容会使页面看起来杂乱不堪，用户也很难找到自己关注的内容。而响应式Web设计并不是将整个网页缩放给用户，而是经过精心筛选，有选择性地显示页面的内容。

例如，一个用户个人信息界面在PC端大屏幕的页面效果如图1-1所示。

在图1-1中，该界面内容分三栏横向排列显示，如果在移动端的小屏幕上，按比例缩小，网页上的文字会看不清，使用响应式 Web 开发可以让该界面呈现纵向排列方式，如图1-2所示。

3.技术层面

在技术层面，响应式Web设计是和HTML5+CSS3互相配合与支持的，实现响应式设计包括以下技术点。

HTML5+CSS3的基本网页设计。

HTML5中的viewport：提供可以配置视口的属性。

CSS3媒体查询（Media Queries）：识别媒体类型、特征（屏幕宽度、像素比等）。

流式布局（Fluid Layout）：可以根据浏览器的宽度和屏幕的大小自动调整效果。

响应式栅格系统（Responsesive Fluid Grid）：依赖于媒体查询，根据不同的屏幕大小调整布局。

流式图片（Fluid Images）：随流式布局进行相应缩放。

实现响应式Web设计，可以说就是根据显示屏幕大小的变化控制页面的文档流，那么学习响应式之前，必须有良好的HTML5+CSS3的页面开发基础，本教材在讲解如何实现页面的响应式之前，将为读者详细地讲解HTML5+CSS3的网页开发基础。