Responsive Design 响应式设计
响应式设计不是把电脑页面硬塞进手机,而是让内容随着屏幕大小重新排队。重点还在,只是站位变了。
关键结构图
重排
左边是一组三列桌面卡片,右边是单列手机卡片,用箭头表示布局重排。
What
响应式设计让同一个页面在不同屏幕上都能被舒服地阅读和使用。
Responsive Design 是一种让网页根据屏幕宽度、设备能力和输入方式调整布局的设计方法。
Structure响应式设计 = 内容优先 + 屏幕断点 + 布局重排
When
当一个产品既要在电脑上看,也要在手机或平板上看时,就需要响应式设计。
How
先确定最重要的内容顺序,再用栅格、断点和间距定义不同屏幕下的排布方式。小屏优先保证阅读和操作,大屏再展开更多信息。
Examples
三列卡片在电脑上可以并排展示。到了手机上,它们应该变成单列,让用户顺着往下读,而不是左右缩到看不清。
图谱在桌面端可以展示更多节点和旁边信息。到了手机上,可以先显示可滑动图谱,把详情放到下一层页面。
来源
类型:官方技术文档 / 行业实践
事实线:MDN 把响应式设计描述为网页或应用对观看环境作出响应的设计方式,常用媒体查询、弹性网格和响应式媒体来适配不同屏幕。
依据:MDN Responsive web design 文档和 Ethan Marcotte 提出的 responsive web design 实践语境。
边界:响应式设计处理的是不同设备上的内容顺序、布局和可用性,不等于为每个设备做像素级相同页面。
常见误读:不要把响应式设计理解成“把桌面页面等比例缩小到手机”,也不要只把它看成几个断点。