我们常常说：内容就像水，可适应于各种各样的媒介。

    作为设计师，刚接触多媒介的页面设计时，很容易对内容如何在媒介与媒介之间流动无从下手、阅读了大量的资料也很难抓住重点。所以今天我根据自己的实战经验，帮助大家理解和制作响应式网页。

响应式网页设计是什么？

    响应式网页设计，通常缩写为RWD（Responsive Web Design）。

    响应式网页设计是一种网页设计的技术，这种设计可使网站在不同的设备（从桌面电脑显示器到移动电话或其他移动设备）上浏览时对应不同分辨率皆有适合的呈现，减少用户进行缩放、平移和滚动等操作行为。

RWD实现的原理是什么？

    网页的页面由 1. APP bar、2. Navigation、3. Body 组成。

cr: Google material design

    当每个部分都有相应的响应规则时，就可以保证页面的流动性。例如在保持在屏幕里的占比恒定、不同范围内对应不同的恒定值。

设计师如何设计RWD规则？

1、选定解析度

    在设置规则之前，我们首先需要确定承载我们产品的大多是哪些载体，是移动手机？还是网页？确定好主要载体之后，就可以选择一些该载体的常见解析度做图。

    该网站提供当今最常用的解析度的统计数据：

    pc端：1920*1080（21.7%）、1366*768（20.1%）、1536*864（9.7%）

    移动平板端：768*1024（43.6%)、1280*800（7.2%）、800*1280（5.7%）

    移动手机端：360*640（11.3%）、414*896（7.8%）；360*780（6%）

2、设计节点和规则

    了解常用解析度之后，并不需要将所有常用尺寸都画一遍，只需要根据业务需要来设计节点和规则即可：

     节点

     有两个比较重要节点：pc尺寸减小到移动平板尺寸的节点、移动平板尺寸减小到移动手机尺寸的节点。

     规则

    根据网页的内容，设置规则。例如页面的边距：

    设置固定边距，中间的内容随屏幕尺寸变化而变化

     又或者设置内容在屏幕里的百分比，内容的布局大小随屏幕尺寸的变化而变化