响应式 Web 设计 Response Web Design

1. Response Web Design
Zhang Sichu

2. 响应式 Web 设计

3. 什么是 响应式 Web 设计?
为什么 响应式 Web 设计?

4. 未来5年
移动互联网 流量
将 超过
桌面互联网 流量

6. 移动 互联网 迅速发展
客户 需要 自己的Web应用 支持 各种 移动终端

7. 有多少种 移动终端?
要为 每种 移动终端 设计 并 制作 一个 Web 应
用？

9. 响应式 Web 设计:
一个网站能够兼容多种终端屏幕尺寸
而不是为每种终端做一个特定的版本

10. Demo

16. Flexible Web Design.
Not Fixed.
Relative.

17. 相对 尺寸
相对 坐标
em %(百分比)
Fluid Grid 流体表格 960Grid Frameless Grid
Liquid Image 液态图片
Css3 media queries. 媒体选择器

18. 相对 尺寸
相对 坐标
em %(百分比)
Fluid Grid 流体表格 960 Grid Frameless Grid
Demo

19. Liquid Image 液态图片
Demo

20. Css3 media queries. 媒体选择器
Initial scale (IOS)
Demo

21. <meta name="viewport" content="width=device-width; initial-scale=1">

22. <img src="image.jpg"
data-src-600px="image-600px.jpg"
data-src-800px="image-800px.jpg" alt="">
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}

24. 一个简单实现!

25. 设计之初 ：
1. 可以使用 绝对 坐标 定位 布局 开始 勾画 页面 初步的样子。
2. 使用 相对 尺寸 定位 布局 设置 长度 宽度 字体 大小。
3. 使用 流体表格 液体图片。
4. 确定 屏幕 尺寸 变化后 需要 隐藏/显示 的内容。
5. 使用 媒体选择器 加载 调整 Css.

26. 相关资源
1. 320 and Up
2. Mobile Boilerplate
3. Golden Grid System
4. Gridless
5. Less Framework
6. 1140 CSS Grid System
7. Fluid 960 Grid System
8. Simple Grid
9. Skeleton

27. 相关工具
1. Respond.js
2. Resize My Browser
3. Media Query Bookmarklet
4. ProtoFluid
5. ScreenFly

28. Thanks.
End.
http://zhangsichu.com