编辑导语：响应式设计成为主流设计趋势，为什么所有的web端都需要响应式设计，其目的是什么？作者从其实际角度出发，分享响应式设计思路及方法，供产品和设计同学参考。

响应式设计概念自2010年提出以来，经过十多年的发展与普及，在我国已经有超30%的占有率，且正在以每年5%的速度，逐渐取代传统静态布局网页。经过断断续续近两个月的时间，我把自己在多年产品设计中积累的经验，整理分享如下。本文将从实际应用角度，介绍响应式设计思路及方法，供产品和设计师同学参考。

是不是所有的web端产品都需要响应式设计呢？且看分析。

1.1 响应式设计的意义

响应式设计之所以会成为主流趋势，是因为从各利益相关者角度，皆具有极大的优势。

从公司角度：一次开发成型，节省开发和运维成本，同时能提升品牌一致性。

从产品角度：在不同的用户设备上，保持一致性的使用体验，输出稳定的产品价值。

从用户角度：不限制设备，不限制使用时间和条件，使用更加便捷。

1.2 网页布局设计的分类

按照网页对分辨率的适配程度，把布局设计区分为三类。

A. 固定布局设计

实现方法：内容宽度固定，布局不根据设备分辨率改变。

设计方案：出一套设计方案，以像素做单位。

B. 自适应设计

实现方法：前端写几套代码对应不同类型设备（如pc端、平板、手机），通过检测视口分辨率，来判断当前访问的是哪种设备，从而显示对应的代码。

设计方案：先为每类设备分别出一套设计，然后在一类设备的分辨率范围内指定元素的兼容方式；同一类设备的分辨率差异较小，因此兼容方式相对简单。

C. 响应式设计