10月27日 移动互联占据互联网市场之后，市场上的终端设备日新月异，谷歌眼镜，苹果智能手表等新型穿戴设备相继发布。仅手机一类品种每年的增长量就有400种之多。高分辨率设备也出现在市场上，4k时代刚刚被大家所熟知，5k屏已经悄然出现在市场中。面对如此多的终端设备，给网站设计者，开发者提出了各种严酷的考验。

先来看两组数据，下图为iOS设备分辨率分布，图中包含5种不同分辨率，每种分辨率都有相当多比例的用户群体。

再来看看android设备分辨率分布。这里边android设备只展示有9种屏幕分辨率，每一种分辨率都拥有一定比例的用户群体。与ios合起来至少有10种分辨率，需要页面支撑。

如果按照目前网站设计中多站点方式去支持如此众多的视口，开发和维护工作是非常沉重的。需要更好的设计理念来支撑如此众多的视口。 其实在2010年5月，Ethan Marcotte就提出了响应式布局概念。它是将流式栅格布局，弹性图片，弹性媒体和媒体查询等已有的技术整合起来，目的是为了网页可以不同设备视口。真正的响应式设计方法不仅是根据视口大小改变网页布局，而且要从整体上颠覆当前设计网页的方法．以往先是针对桌面电脑进行固定宽度设计，然后将其缩小并针对小屏幕进行内容重排。

目前，用友UAP认为，应该首先针对小屏幕进行设计，然后逐步增强针对大屏幕的设计和内容。一般可以通过阻止移动浏览器自动调整页面大小、媒体查询以及运用流式布局等技术来实现响应式网页设计。最终支持多种设备，如下图：

第一，阻止移动浏览器自动调整页面大小

使用智能手机浏览桌面端网站时，一般会自动缩放到合适的宽度使视口能够显示整个页面，但是这样会使文字变得很小，浏览内容不方便。可以通过设置meta标签的viewport属性，设定加载网页时以原始的比例显示网页．将这个meta标签加到标签里。

viewport是网页默认的宽度和高度，上面代码的意思是网页宽度默认等于设备宽度(width=device-width)，原始缩放比例(initial-scale=1)为1：0，表示支持该特性的浏览器都将会按照设备宽度的实际大小渲染网页。

所有主流浏览器都支持这个设置，包括IE9．对于那些老式浏览器(主要是IE6、7、8)，需要使用css3-mediaqueries．js或者respond．js为IE添加Media Query支持．