3、响应式Web设计（也称为自适应Web设计）
（1）设计的理念 它的目的是让页面中的内容布局能随用户所使用的显示器 的分辨率的不同而变化，也就是能够达到页面的设计与开发应 当根据设备环境（屏幕尺寸、屏幕方向、系统平台、浏览器等） 以及用户行为（改变窗口大小、切换屏幕方向等）进行相应的
响应和调整—— 它可以发现 （识别）用户 使用的是什么 设备，并调整 设计内容以适 应设备。最终 达到最佳的显 示方式。
（3）如何能够自适应显示设备的分辨率 很多人并不是在全屏的情况下浏览我们的Web页面，如果 让页面随着浏览器宽度改变而相应的调现技术的产生
自从2010年，Ethan Marcotte提出了 “自适应网页设计” （Responsive Web Design）这个名词，指可以自动识别屏幕 宽度、并做出相应调整的网页设计。
跟我学响应式 Web设计相关技术及应用实例
1、在Web页面设计中经常遇到的几个问题
（1）希望所开发出的Web网站能够兼容手机、平板电脑、PC 传统的实现方式 是为不同的设备定制 不同的版本——目前 的终端设备多样化， 这样的实现方式将导 致出现人力、时间和 成本等方面的问题。
（2）各种终端设备的显示屏幕的尺寸也多样化 想要Web网站的某些页面在宽屏显示器下一行显示更多的 内容，又得为宽屏定制一个版本。而对于移动设备还有“横屏” 和“竖屏”之分。
（2）随着智能手机和电脑平板电脑的普及，越来越多的网页设 计采用这种人性化的设计布局 响应式设计让Web设计人员应对设备碎片化有了更灵活的 方式，而且它不仅仅只包括CSS3 Media Queries技术的应用， 还包括响应式图片（ResponsiveImages）、响应式视频等多种 技术。
4、响应式Web设计具体的实现方式
（3）操作灵活 响应式设计是针对页面的，可以只对必要的相关页面进行 改动，其它页面则不受影响。
6、 响应式Web设计的实例展示
（1）当浏览器宽度变小时，Web页面中的左右两栏的宽度也都将 会缩小，同时左边的banner图片和视频也会相应地缩小，而右 边的头像列表则会由一排4个变为一排两个； （2）当浏览器宽度进一步变小后，页面由两栏结构转变为一栏 结构，页面中部分内容的尺寸将进一步缩小，搜索区域也从导 航条中挪到了导航条外面。
（3）根据上面的实现结果，从技术实现的角度来看，如果希望 达到如此的实现效果，则首先必须能够知道当前的屏幕分辨率， 同时也还必须能够动态地调整页面的表现。如何实现？
7、响应式Web设计的实例展示及核心技术
（1）HTML5提供了比HMTL 4具有更多且更加语义化的标签，语义 化的标签只是更加取消和明了（自我标榜），但并不能满足上 面的应用需求。因此，仅仅依靠HTML5标签是实现不了上面的 效果？
（2）在CSS3中所增加的“媒体查询”是响应式设计不可或缺的 核心技术，它能够实现和满足上面的应用要求，而CSS3中的其 它功能支持和技术实现都给了Web设计人员前所未有的灵活 性——比如，设计人员可以挣脱背景图像和复杂的JavaScript 代码的羁绊，拥抱简洁的CSS3渐变、投影、字体、动画和变换 等技术实现，从而可以减少对第3方的插件依赖。
（3）手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕 宽度，一般都在1000像素以上（目前主流宽度是1366×768）， 有的还达到了2000像素。同样的内容，要在大小迥异的屏幕 上，都呈现出满意的效果，并不是一件容易的事。
8、响应式页面的设计流程
（1）第一步：确定需要兼容的设备类型、屏幕尺寸 通过用户研究，了解用户使用的设备分布情况，确定需要兼 容的设备类型、屏幕尺寸的具体状况。 1）在设备类型方面，目前主要包括移动设备（手机、平板） 和PC（当然，以后还要考虑电视）。对于移动设备，设计和 实现的时候注意增加手势的功能。 2）对于屏幕尺寸，需要考虑和包括各种手机屏幕的尺寸（包 括横向和竖向）、各种平板的尺寸（包括横向和竖向）、普 通电脑屏幕和宽屏。 在此阶段所需要考虑的问题如下：某个页面进行响应式设 计时其适用的尺寸范围是哪些?（320px到...？） 比如，1688搜索结果页面，跨度可以从手机到宽屏，而 1688首页，由于结构过于复杂，想直接迁移到手机上，不太现 实，不如直接设计一个手机版的首页或者对PC版本的页面进行 过滤和裁剪——总之，不能简单地将PC版本的页面搬到移动设 备的屏幕上。
结合用户需求和实现成本，对适用的尺寸进行取舍。比如 一些功能性操作的Web页面，用户一般没有在移动端进行操作 的需求，因此没有必要进行响应式设计。
为此，需要理解在PC端应该要提供哪些方面的功能，而在移 动端则同样要提供哪些功能。
（2）第二步：制作线框原型 1）针对确定下来的几个尺寸分别制作不同的线框原型，需要 考虑清楚不同尺寸下，页面的布局如何变化，内容尺寸如何 缩放，功能、内容的删减，甚至针对特殊的环境作特殊化的 设计等。 2）这个过程需要设计师和Web前端开发人员保持密切的沟通。 （3）第三步：测试线框原型 将图片导入到相应的设备进行一些简单的测试，可帮助开 发人员尽早地发现可访问性、可读性等方面所可能存在的问题。 根据所发现出的相关问题，进行调整页面的结构和布局。
（1）实现的方法可以有许多——液态网格（也称为弹性网格和 布局）和液态图片技术，CSS Media Query的使用等。
（2）无论用户正在使用PC、平板电脑，或者手机，无论是全屏 显示还是非全屏使用的情况，无论屏幕是横向（portrait）还 是竖向（landscape）， 页面都应该能够自 动切换分辨率、图 片尺寸及相关脚本 功能等，以适应不 同设备。
5、 响应式Web设计的主要优势——“一次设计、普遍适用”
（1）开发、维护、运营成本优势 页面的HTML标签文件只有一个，只是针对不同的分辨率、 不同的设备环境进行了一些不同的设计，所以在开发、维护和 运营上，相对多个版本，能节约成本。 （2）兼容性优势 移动设备新的尺寸层出不穷，定制的版本通常只适用于某 些规格的设备，如果新的设备分辨率变化较大，则往往不能兼 容，而开发新的版本需要时间，这段时间内的访问就是个问题， 但是响应式Web设计可以提前预防这个问题。