1. 流动布局

在响应式设计的布局中，不再以像素作为唯一单位，而是采用百分比或混合百分比、像素为单位，设计出更具灵活性的布局方式。

2. 媒介查询

媒介查询能让你按照特定环境下查询到的各种属性值来决定应用什么样的样式，通过使用媒介查询，可获取到设备及设备特性，并给出求同存异的方案，进而解决之前在单纯布局设计中遗留的问题。

3. 弹性图片

伴随布局弹性，图片作为信息重要的形式之一也须有更灵活的方式去适应布局变化，网页设计公司认为弹性图片在后续研究中可以以图片为典型，扩大研究范围，还应包括图标、图表、视频等信息内容的响应方式。

二、响应式设计的盛行原因

响应式设计的概念从提出至今，一直不断蔓延扩散，在网页设计公司看来，响应式设计得到各方认可的主要原因：

1. 外部环境

快速增长且日趋加剧的可联网设备的多样化，让现今已不再有标准的屏幕尺寸。

2. 自身特色

严格定义的响应式一般指响应式Web设计，而Web凭借其特有的灵活性和可塑性，可适应各种尺寸和配置的设备，可无处不在。

3. 内部需求

响应式设计概念一提出，各大网站及平台都希望能够采用这秉一应万的模式，可更灵活地去适配更多设备，尤其是现在移动设备大爆棚的时代。

三、什么情况下适合响应式设计？

1. 想节约成本地去适应更多场景

资源是有限的，但总是希望能利用有限的资源去获得更大的价值，要打造一个响应式站点，需要的人力和时间都会增加，但比起为不同设备分别打造多个版本的成本还是要低。

2. 不清楚要设计开发的全新产品更适合哪个场景

与其通过预测挑选核心设备再进行分别设计，不如先花心思使网站其在各种设备中都拥有尽可能优秀体验，因为在各方面都未知的情况下，做预测会加剧过程风险，使结果存在巨大的挑战性。

3. 希望网站可兼容未来的新设备

新设备层出不穷，与其被动地更新维护，不如主动应万变，成为响应式，当然这里只是说更适合，其实网页设计公司认为只要项目资源和时间允许，基本上大部分网站都可去尝试实现响应式。

四、响应式设计的设计模式

目前，大多网站中选择响应式的设计模式主要有两种：

1. 基于设备

通过主流设备的类型及尺寸来确定布局断点，设计多套样式，再分别投射到响应的设备。

2. 内容优先

按照内容的可读性、易读性作为确定断点标准，可无视设备，有内容决定何时需要采用不同的呈现方式。

五、响应式设计的思维模式

1. 忘记设备

因为不知道用户会用什么样的设备来访问网站，所以，必须尽可能地把所有情况囊括进来，所有的东西（布局、组件等）都能与不同类型的设备和平台相兼容。

2. 优雅降级

内容从宽到窄的变化呈现，须经过重重筛选，留存最核心的内容块，这种模式非常适合对已存在的PC页面产品进行响应式设计改造。

3. 渐进增强

在本质上说，就是把优雅降级倒过来：先创建一个基本体验，侧重让内容以一种简介的方式来展现；之后，在保证基本体验的前提下，开始着手做有关显示的布局和交互。

六、响应式设计的难题

1. 响应式图片

目前弹性图片的做法主要是：缩放、剪裁、分条件加载等实现方法本质上都只是一个技巧，只是治标不治本地掩盖了问题，并未真正完美地实现图片的弹性。

2. 跨端的交互

在响应式设计中，不仅要需要考虑桌面用户的使用习惯，还须兼顾不同尺寸的手持设备。

3. 性能

性能估计是在响应式开发中最大的痛，按条件加载、隐藏或显示什么内容，都会比单一条件判断的代码结构来的繁琐，并影响体验及维护。

4. 合作流程

响应式设计远远不止是一种简单的设计策略，它为Web项目带来的是一整套全新的、完整的方法，还应包括一种新的、可更好利用这一模式的工作流程。

响应式网站设计的现状和难点在设计探究的道路上，也是网页设计公司技术人员需要解决的一大课题，但要了解的是，这些难题都将会被攻破。

下一篇：建立高端品牌网站建设的形象需要注意的几点上一篇：如何做出吸引用户的网站