网页栅格系统
从CSS说起
CSS盒模型
兼容性的考虑
- 兼容不同浏览器
- 兼容不同设备屏幕尺寸
- 兼容视网膜屏
- 兼容视觉障碍者
响应式的含义
写一次，适配所有
- 不是所有的网站都实现了响应式
- 不是所有的响应式都用栅格来实现
- 实现了栅格未必就有响应式
- 不是所有的网站都真正实现了栅格
- 不论栅格还是响应式都有多种实现方法
栅格为布局排版而生
UI系统
各种主流UI
Bootstrap Grid
V2 vs V3
v4 is coming...
移动优先
媒体查询
- 列偏移
- 列嵌套
- 列排序
- 列重置
- 列封装
-
显式与隐藏
-
定制栅格
-
固定宽度
-
非固定宽度
-
视网膜屏