Se Connecter Maintenant 许多设计师对“响应式布局”这个词并不陌生，大概也能描述出它的样子——页面会根据屏幕大小自动伸缩，在手机上看着舒服，在电脑上也不会走样。可一旦轮到自己动手设计、或者需要跟前端沟通实现方案时，各种问题就冒出来了。更头疼的是想查资料补课，大部分教程压根儿是写给前端工程师看的，术语铺天盖地，对设计师来说实在谈不上友好。这篇文章想用尽量直白的方式，把响应式网站设计里最常遇到的几个问题梳理一遍，再配上一些简单的示意图，让你读起来轻松一点，也更容易和开发同事聊到同一个频道上。
我们常常会混淆一个概念：自适应和响应式到底是不是一回事？很多人把它们混着用，其实背后的原理类似——都是检测设备，再根据不同设备加载对应的 CSS。但有一个很直观的区分方法：同一个页面，在不同尺寸的屏幕上访问时，你看到的网站是不是“同一套”。如果布局会随着窗口大小连续变化，内容始终在一个页面里流动，那它就是响应式；如果是专门为手机、平板、桌面各自准备了不同的版本，页面结构也可能完全不同，那就是自适应。换句话说，响应式是“一个网站打天下”，自适应则是“多个网站各管各的”。还有一个区别体现在设计师的工作上：如果每个终端都要单独出一套界面，那大概就是走自适应的路子了。
在具体项目里该怎么选呢？如果页面功能不复杂，用户交互很少，也不需要频繁更新，从维护成本和操作难度来看，响应式会更省心——做好网页端，其他尺寸基本就能兼顾到。自适应则更适合那些功能繁多、交互频繁、需要给用户提供高度定制化体验的网站，比如大型电商平台，用户量大，对性能和体验要求都非常高，各自独立的版本能打磨得更精细。
要做一个响应式页面，至少得满足两个前提：一是页面布局要有规律，建立在弹性网格的基础上，元素的宽高尽量用百分比而不是固定像素值；二是网页里的图片必须能随着容器伸缩，不能写死宽高。这两点恰好是网格系统最典型的特征，所以响应式设计和网格几乎是天然的一对。用网格来搭建响应式结构，不仅逻辑更顺，效率也更高。
顺便聊聊现在很流行的一种网格思路——“8 点网格”。它是在纵向网格系统里，把基准单位定为 8pt，所有间距、尺寸都基于 8 的倍数来设计。这样做的好处很直接：对设计师来说，不用在无数个像素值之间纠结，决策更快，页面元素之间也会自然保持一种统一的节奏感；对团队来说，设计师和前端工程师更容易达成默契，前端凭肉眼就能判断 8 的倍数，不用拿尺子去量像素；对用户来说，在不同设备上能获得一致的高品质体验，也不会出现那种因为半像素偏移导致的模糊。
接下来看看常见的几种动态布局方式。除了固定布局、流体布局、混合布局和响应式布局这些大分类，响应式页面在调整模块结构时，往往会用到几种变化形式：
最简单的，是布局不变，模块内容左右伸缩。整体结构不动，只是内容区域等比缩放，像拉橡皮筋一样。另一种是布局不变，但内容换成平铺显示。当屏幕变窄，原本横向排列的内容会自动变成竖向，比如从一行三列变成两列，再变成一列，这样能更好地利用空间。还有一种是布局不变，模块内容增减：宽屏上显示完整信息，小屏上把次要信息收起来，只保留核心部分，这是最常见的响应效果之一。再进一步，可能出现布局变化，模块位置也跟着变。比如桌面端是左右布局，左侧放导航，到了手机上导航就跑到顶部去了，位置关系完全变了。更灵活的情况是，布局变化时，模块内容数量也变化：某些模块在响应过程中会被隐藏，甚至直接移除，只留下最必要的内容。
那“媒体查询”和“断点”又是什么？媒体查询就是前端用来获取设备特征的一种方法，比如设备宽度、窗口大小、屏幕方向、分辨率等等。而断点，就是页面布局发生变化的那个临界宽度。在浏览器里打开一个响应式网站，按 F12 检查元素，慢慢把窗口缩小，你会看到页面突然变了个样子，那个卡住的地方就是一个断点。一个页面可能有多个断点，有的起主要作用，有的只是辅助微调。
断点怎么选，这件事一定要根据页面的具体内容来定，而不是直接抄几个流行设备的宽度。设计的时候，你试着在一定范围内拉宽或压窄页面，会碰到某个尺寸下内容显示方式必须改变，那个尺寸就是关键节点，就应该设断点。可以参考网站用户实际使用的设备分辨率数据，但不要一上来就盯着 iPhone 或者 iPad 的尺寸去设断点。更好的做法是，让常见设备的宽度能自然落在你设计的范围内，而不是刚好卡在断点线上。先保证手机、平板、桌面显示器这几个大范围里的体验，然后再去微调，这样更合理。
最后，说说设计执行中容易碰到的两个问题。
一个是图标放大后变形、模糊怎么办。响应式页面拉伸压缩的时候，图标如果用的是位图，很容易出现锯齿或者模糊。比较好用的办法是把图标做成字体图标（Icon Font）。它的好处很明显：矢量格式，怎么放大都不会模糊；体积小，250 个图标的字体文件不到 300K；能用代码灵活控制颜色、大小、透明度甚至动效；兼容性也好，连低版本 IE 都能用。
另一个是设计稿到底要做几套。这取决于你设了多少个断点，而断点数量又取决于网站内容本身。设计师需要根据实际内容，找到那些不能让列间距过宽或过窄的临界点，然后出一套关键尺寸的设计稿，剩下的交给前端按弹性规则去适配就好。没必要每个尺寸都做一套，那样效率太低了。
本文内容整理自网络公开资料，主要用于分享互联网运营与设计相关的干货知识，版权归原作者所有。如涉及侵权，请联系我们删除。