Web前端培训：响应式Web设计简介

　　响应式Web设计(Responsive Web Design)是由Ethan Marcotte在2010年提出的，其目标是要让设计的网站能够响应用户的行为，根据不同终端设备自动调整尺寸。

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

　　1.一套设计，多处使用

　　如果要找一个成本、设计、性能的平衡点，响应式设计是最好的选择。响应式Web设计可以做到一套设计，响应多种屏幕。

　　2.移动优先

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

　　从用户体验方面来看，通常网站会在移动浏览器上缩放，这样虽然可以完整地呈现给人们想要浏览的内容，但鉴于移动设备屏幕大小的限制，过多的内容会使页面看起来杂乱不堪，用户也很难找到自己关注的内容。而响应式Web设计并不是将整个网页缩放给用户，而是经过精心筛选，有选择性地显示页面的内容。

　　响应式Web设计有哪些相关技术?

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

　　(1)HTML5+CSS3的基本网页设计。

　　(2)视口：提供可以配置视口的属性。

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

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

　　(5)流式图片(Fluid Images)：随流式布局进行相应缩放，可以理解为图片的流式布局。

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

　　(7)弹性盒布局：CSS3的弹性盒布局，一个可以让人们告别浮动，完美地实现垂直居中的新特性。

　　(8)弹性图片：指的是不给图片设置固定尺寸，而是通过设置img{max-width:100%;}，让图片大小自动适应屏幕大小。

　　实现响应式Web设计，可以说就是根据现实屏幕大小的变化控制页面的文档流。