网页栅格系统

从CSS说起

CSS盒模型

兼容性的考虑

• 兼容不同浏览器
• 兼容不同设备屏幕尺寸
• 兼容视网膜屏
• 兼容视觉障碍者

响应式的含义

写一次，适配所有

• 不是所有的网站都实现了响应式
• 不是所有的响应式都用栅格来实现
• 实现了栅格未必就有响应式
• 不是所有的网站都真正实现了栅格
• 不论栅格还是响应式都有多种实现方法

栅格为布局排版而生

UI系统

各种主流UI

• Bootstrap
• Foundation
• Semantic UI
• Pure
• Metro UI
• Materialize
• Ionic

Bootstrap Grid

V2 vs V3

v4 is coming...

移动优先

媒体查询

• 列偏移
• 列嵌套
• 列排序
• 列重置
• 列封装

• 显式与隐藏

• 定制栅格

• 固定宽度

• 非固定宽度

• 视网膜屏

试一试

还有什么

我们自己的UI系统