响应式布局简介

响应式布局简介

[slide]

布局方式

  1. 固定布局
  2. 可切换的固定布局
  3. 弹性布局
  4. 混合布局

例1↓
[slide]
例

[slide]
例2↓
例

[slide]

设计方向

  • 桌面优先 (从桌面端向下设计)
  • 移动优先 (从移动端向上设计)

[slide]

响应影响布局的具体行为

布局不变

  1. 内容拉伸图片
    [slide]

  2. 内容平铺图片
    [slide]

  3. 内容删减
    图片

[slide]
布局改变

  1. 模块位置改变
    图片
    [slide]

  2. 模块展示方式改变图片
    [slide]

  3. 模块数量改变图片

[slide]

很多时候,单一方式的响应式无法满足理想效果,需要多种组合方式,但原则上尽可能是保持简单轻巧, 而且同一断点内要保持统一逻辑,否则页面实现的太过复杂, 也会影响整体体验和页面性能

[slide]