网站设计：响应式网站该如何设计？

响应式网站（自适应网站）是用最通俗的语言来讲，就是网站设计通过一个唯一的网址，唯一的一份网站内容，唯一的一份网站代码，通过CSS3媒体查询方式，可以在多种浏览器设备上进行一致的浏览。响应式站点设计的目的是期望网页设计和网页编码能够对用户的操作行为和环境进行合理的响应，而这种响应应建立在用户的浏览器屏幕大小、操作平台等。

响应式页面：通过合理的设计方案，配合规范的技术实现策略，使同一个Web页面在不同的媒介(Media)、不同的视窗(Viewport)下有不同的布局结构、板式设计以及不同数量信息的展示，以实现最佳的用户体验。

Media：指Web页面运行在那些设备屏幕上（手机、平板、PC、Mac等）；

视窗：浏览器用来显示页面内容的窗口，也就是浏览器去掉标题栏、地址栏、工具栏之后显示内容的窗口大小。

大家普遍认为移动端碎片化严重，实际上桌面端设计的分辨率随着新设备的增加，碎片化也日益严重，想在各种屏幕上都得到好的用户体验，传统固定的布局就做不到了。

例如，微软的官方网站能够在桌面浏览器上显示符合桌面互联网浏览布局的内容展示形式，而在平板电脑、智能手机上则可以根据屏幕的变化而自动调整内容的布局和尺寸，让用户可以在平板电脑和智能手机上也获得桌面浏览器上的一致体验。

当新的移动设备以潮水般的速度涌进我们生活的时候，拥有一个可以适应多种屏幕分辨率的网站建设就显得尤为重要了。据ComScore在2012年的调查发现，2009年全世界仅有8亿部移动互联网用户，而到2015，将有19亿移动互联网用户，而相比较而言，桌面互联网用户从2009到2015年只会增加2亿左右，增幅远远低于移动互联网的普及度。

1、提升用户体验

响应式网站考虑了不同的终端下不同分辨率下的显示效果，如果移动设备浏览传统网站，由于没有对移动设备进行过整站营销处理，所有体验效果相对会比较差，响应式网站设计，根据不同分辨率都会出现的显示效果都进行了现对调整，大大提高了用户浏览的体验效果。

2、节省时间和成本

响应式技术，虽然有时在规划阶段非常耗时，但是从长远来看可以帮助开发人员节约时间。使用响应式技术，不需要专门为移动设备重新设计网站和重定向。这可以使网站更新变得更简单，因为一个更新就可以解决所有的设备。

3、对 更加友好

响应式设计会提高搜索引擎权重。因为一个响应式网页设计只有一个URL，而不是多个页面指向移动设备，避免搜索引擎因重复内容而降低权重。Google也建议优先采用响应式设计，因为无论是什么网页版本都是相同的HTML、相同的内容，Google最容易处理。