网页与前端 · 入门

不痛苦的响应式设计

一句话: 从小屏开始,让内容决定在哪里断,不要照着设备清单去设计。

先做小的

从桌面开始再缩小的设计,总会产生妥协;从手机开始再长大的设计,会产生清晰的重要性层级。窄屏上没有位置留给不必要的东西,而这恰恰是每个界面都需要的练习。

实践上:一列、可读的字号、大到能用拇指点的触摸区域。

按内容定断点

不要按设备型号选断点——那份清单每年都在变。把窗口拉宽,直到版面开始变难看,断点就放在那里。

大多数现代版面总共需要两到三个断点。如果你有七个,那八成是在画页面,而不是在定义行为。

真正会坏的地方

宽表格、固定比例的图片、被难看地折断的希伯来语长标题,以及消失的菜单。每一个都有简单的解法:给表格声明横向滚动、定义宽高比、控制断词。

深入一层

也要检查那些被忘记的维度:非常宽的屏幕上一行长到读不下去、200%缩放、手机横屏。这三种情况都比想象中常见,而且都会在只测了两个宽度的站点上出问题。