Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Response Web Design              Zhang Sichu
响应式 Web 设计
什么是 响应式 Web 设计?为什么 响应式 Web 设计?
未来5年移动互联网 流量将 超过桌面互联网 流量
移动 互联网 迅速发展客户 需要 自己的Web应用 支持 各种 移动终端
有多少种 移动终端?要为 每种 移动终端 设计 并 制作 一个 Web 应用?
响应式 Web 设计:一个网站能够兼容多种终端屏幕尺寸而不是为每种终端做一个特定的版本
Demo
Flexible Web Design.Not Fixed.Relative.
相对 尺寸相对 坐标em %(百分比)Fluid Grid 流体表格 960Grid Frameless GridLiquid Image 液态图片Css3 media queries. 媒体选择器
相对 尺寸相对 坐标em %(百分比)Fluid Grid 流体表格 960 Grid Frameless GridDemo
Liquid Image 液态图片Demo
Css3 media queries. 媒体选择器Initial scale (IOS)Demo
<meta name="viewport" content="width=device-width; initial-scale=1">
<img src="image.jpg"        data-src-600px="image-600px.jpg"        data-src-800px="image-800px.jpg" alt="">              ...
一个简单实现!
设计之初 :1.   可以使用 绝对 坐标 定位 布局 开始 勾画 页面 初步的样子。2.   使用 相对 尺寸 定位 布局 设置 长度 宽度 字体 大小。3.   使用 流体表格 液体图片。4.   确定 屏幕 尺寸 变化后 需要 隐藏/显示...
相关资源1.   320 and Up2.   Mobile Boilerplate3.   Golden Grid System4.   Gridless5.   Less Framework6.   1140 CSS Grid System...
相关工具1.   Respond.js2.   Resize My Browser3.   Media Query Bookmarklet4.   ProtoFluid5.   ScreenFly
Thanks.End.http://zhangsichu.com
Response Web Design
Response Web Design
Response Web Design
Response Web Design
Response Web Design
Response Web Design
Response Web Design
Response Web Design
Upcoming SlideShare
Loading in …5
×

Response Web Design

1,380 views

Published on

响应式 Web 设计
Response Web Design

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Response Web Design

  1. 1. Response Web Design Zhang Sichu
  2. 2. 响应式 Web 设计
  3. 3. 什么是 响应式 Web 设计?为什么 响应式 Web 设计?
  4. 4. 未来5年移动互联网 流量将 超过桌面互联网 流量
  5. 5. 移动 互联网 迅速发展客户 需要 自己的Web应用 支持 各种 移动终端
  6. 6. 有多少种 移动终端?要为 每种 移动终端 设计 并 制作 一个 Web 应用?
  7. 7. 响应式 Web 设计:一个网站能够兼容多种终端屏幕尺寸而不是为每种终端做一个特定的版本
  8. 8. Demo
  9. 9. Flexible Web Design.Not Fixed.Relative.
  10. 10. 相对 尺寸相对 坐标em %(百分比)Fluid Grid 流体表格 960Grid Frameless GridLiquid Image 液态图片Css3 media queries. 媒体选择器
  11. 11. 相对 尺寸相对 坐标em %(百分比)Fluid Grid 流体表格 960 Grid Frameless GridDemo
  12. 12. Liquid Image 液态图片Demo
  13. 13. Css3 media queries. 媒体选择器Initial scale (IOS)Demo
  14. 14. <meta name="viewport" content="width=device-width; initial-scale=1">
  15. 15. <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); } }
  16. 16. 一个简单实现!
  17. 17. 设计之初 :1. 可以使用 绝对 坐标 定位 布局 开始 勾画 页面 初步的样子。2. 使用 相对 尺寸 定位 布局 设置 长度 宽度 字体 大小。3. 使用 流体表格 液体图片。4. 确定 屏幕 尺寸 变化后 需要 隐藏/显示 的内容。5. 使用 媒体选择器 加载 调整 Css.
  18. 18. 相关资源1. 320 and Up2. Mobile Boilerplate3. Golden Grid System4. Gridless5. Less Framework6. 1140 CSS Grid System7. Fluid 960 Grid System8. Simple Grid9. Skeleton
  19. 19. 相关工具1. Respond.js2. Resize My Browser3. Media Query Bookmarklet4. ProtoFluid5. ScreenFly
  20. 20. Thanks.End.http://zhangsichu.com

×