设计师就业衔接班！45天 PS、AI、AE 从入门到入行 详情戳>>>
如果你不熟悉响应式设计，这篇特意制作了超多动图，可以帮你轻松看懂，基础差也不怕。
本文从响应式页面是什么、响应式布局的规则、响应式的设计流程三个方面，帮你彻底掌握网页的响应式设计原理。
Z Yuhan : 我曾经很推崇 Material Design 的响应式栅格系统，花了不少时间去理解那几张复杂的图表和几张酷炫的动态示意。可当真正需要用到响应式这东西时，在做完竞品调研后，我慢慢发现自己真不该那么执着于 Material Design 响应式栅格系统，因为：那两张英文图表对艺术背景的设计师来说真的很难理解。
Tony（作者）：响应式 UI能够使我们设计的元素在任何大小屏幕尺寸能够灵活适配，保证布局和体验的一致性。毫无疑问，响应 UI 设计对于现今碎片化的屏幕是非常重要的，它能使我们在最小的资源的情况下完成设计适配，它的工作原理通过断点系统来判断读取布局方式，断点其实就是媒体查询值。
响应式网页设计已经是如今当之无愧的标准配置了，我们需要响应式的技术来应对日渐碎片化的屏幕尺寸，网页设计师也力图做好这件事情。而网页中的图片和图库的响应式设计，也是其中的重点难点。
编者按：在很多方面HTML和CSS是一个强大的内容发布机制——易学、灵活和强大。但复杂的布局是他不擅长的。
编者按：今天这篇腾讯游戏七宝同学的干货，不仅给同学们科普了绝对/相对长度单位、屏幕尺寸/分辨率/像素密度、PPI/DPI/SP/PX等一系列基础术语，还对移动页面重构最重要的知识点Viewport作了深入讲解，全程专业干货，设计师收！刚开始接触移动页面重构，是不是很迷惑应该按照多大的尺寸制作？
@励定洲 ：无论是对于印刷、网站或是电视广告来说，排版都是我们用来沟通信息的主要方式。排版之重要性我想已无须赘述。
扁平化设计流行起来之后，现代简约风与之结合产生了许多视觉上以区块为主的网页设计作品。对于设计师而言，这种设计方式既时尚，又富于功能化，网站结构流畅、简单，与响应式的设计也有着天然的兼容性。
编者按：绝对值得收藏！响应式网站是大势所趋，今天这组模板，可以非常方便地展示你的网站作品，全都附有笔记本、台式机、平板和手机的模板，建议马克下，以后一定会用到的 >>>Responsive Showcase PSDApple Device Wireframe MockupsResponsive Showcase Device MockupFlat Responsive Showcase PSD Vol.2Flat Devi...
没有哪个成功的Web项目是在设计师和开发无法流畅沟通的前提下搞定的，协作才是做好项目的基础。我曾看到经验丰富的设计师和开发者因为沟通不畅和误会导致项目失败，也见过新手设计师和开发团队一起通过高效协同，做出惊艳无比的设计项目。
@十萬個為什麽 ：本文重点讨论设计师遇到最多的3个响应式设计问题，也会提供一些规避错误的策略 >>>响应式设计方法对开发者非常有用，因为它使我们的内容在各种设备上广为传播。不用保留几个独立版本的网站，也可以摒除诸如缩放和流式布局这些方法的弊端。
编者按：作为今年大热的设计趋势，响应式已然是设计师的标配技能。今天阿里的同学从响应式设计的布局类型、布局实现两方面深入讲解，有哪些实现布局的方式，该采用何种方式，都有相当专业细致的解答，不多说，来收 >>>Heyuchan ：在谈响应式布局前，我们先梳理下网页设计中整体页面排版布局，常见的主要有如下几种类型：布局类型：布局实现采用何种方式实现布局设计，也有不同的方式，这里基于页面的实现单位而言，分为四种类型：固定布局、可切...
响应式网页设计有多火咱就不在此赘述了。但是要做好响应式设计，让网页在每一块屏幕上都能正常地显示并拥有良好的版式，设计师和前端同学需要为此付出大量的心血。
Arrietty：当我们建立网站的时候，我们一般从定义正文开始。正文的定义显示了你的主栏有多宽，其它几栏的大小就随它自己内容定义了。
@MartinRGB 响应式设计是最近的流行词，能够打造多屏幕一致体验。现在几乎每个人都喜欢响应式设计，而且可以是没有原因的支持，这跟Flash刚出现那会火热的局面有点相似。
超赞！难得的一套响应式网页模版，分别含iPad、iPhone、PC三个平台的界面设计。
在相对更小的空间里实现同样的功能，做到这一点并不容易。自从互联网发明以来，屏幕的尺寸一直稳步增长，网页设计师已经学会如何充分利用屏幕空间。
TNW发布了2013年10大网页设计趋势：1、响应式布局盛行，即一个网站适配多种屏幕;2、重视字体的选择，使用Web字体;3、更少的使用Flash，使用其他任何可能替代的技术;4、苹果iOS的拟物化设计将不再时髦;5、使用巨大的背景图构造大气的视觉效果;6、产品和个人介绍页面留出更多空白;7、更多的社交网络分享入口;8、浅色、冷色调重新成为主流;9、移动App将取代一部分移动网页流量;10、内容依旧为王;好了，该到我们年终展望新年的时刻了。...
很棒啊，我是室内设计转行过来的，如果被问到为什么转行该怎么回答呢？我是自学的ui。作品集做了一整套的从0到1的设计。
之前图标那期我看了，受益良多，没想到要打造一个系列了，感谢大佬
很好的思考过程，以前是设备与设备的沟通，移动IM时代情境下变成了人与人的交流，设备状态则变成了人的状态。
超级好文 ，很棒
更倾向第三个方案，前两个看多了有些视觉疲劳，而且，pass掉第三个的理由是要做差异化，这个有点牵强。为了不同而不同，新拟物风格到后期拓展的时候，有很大的局限性！
很棒啊，我是室内设计转行过来的，如果被问到为什么转行该怎么回答呢？我是自学的ui。作品集做了一整套的从0到1的设计。