Response Web Design

?Download as PPTX, PDF?

0 likes?762 views

Sichu Zhang

响应式 Web 设计 Response Web Design

响应式 Web 设计:

一个网站能够兼容多种终端屏幕尺寸

而不是为每种终端做一个特定的版本

Flexible Web Design.

Not Fixed.

Relative.

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

Liquid Image 液态图片

Css3 media queries. 媒体选择器

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

Demo

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

Demo

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

<img src=/slideshow/response-web-design/11750843/"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);
}
}

设计之初：
1. 可以使用绝对坐标定位布局开始勾画页面初步的样子。

2. 使用相对尺寸定位布局设置长度宽度字体大小。

3. 使用流体表格液体图片。

4. 确定屏幕尺寸变化后需要隐藏/显示的内容。

5. 使用媒体选择器加载调整 Css.

相关资源
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

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

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=/slideshow/response-web-design/11750843/"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

Editor's Notes

From Ethan’s article.
全球有超过53亿手机用户（包括传统手机）国内3G用户超过1亿iPhone4手机在2010年出货量超过3000万部；iPhone 4S上市前3天卖掉400万部；Android手机每天激活超过50万部；iPad出货量已经超过2.5亿部；
移动互联网迅速发展客户需要自己的Web应用支持各种移动终端同时最好各种终端有一致的和桌面类似的用户体验
移动终端生产厂商众多。支持移动终端应该有两类问题需要解决:一些原生行为的支持如：拖拽(IPAD 上使用JavaScript事件模拟拖拽),手势(为移动应用特定的手势支持进行扩展) 等等…2. 在不同屏幕尺寸下，都给用户一个友好的UI界面，友好的阅读体验。响应式 Web 设计，只针对问题2。屏幕尺寸多变。Web 应用要支持多种屏幕尺寸。会有多少种屏幕尺寸需要支持?
之前的一个数据2005至2008年市场中的400余种移动设备进行了统计(查看报告)，现在屏幕尺寸会更多/更少?要为每种终端尺寸设计一个 Web 页面，这个是比较耗时耗费资源的。
一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的。
Android模拟器http://stephencaver.com/http://foodsense.is/http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.htmlemulator.exe -avd avd4.0
3个主要尺寸
思想借鉴建筑学上的思想。响应式建筑(responsive architecture)Ethan物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用，建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构。还可以使用运动传感器配合气候控制系统，调整室内的温度及环境光。已经有公司在生产"智能玻璃"：当室内人数达到一定的阀值时，这种玻璃可以自动变为不透明，确保隐私。相对的响应变化调整自己提供更加友好的展示。
http://www.alistapart.com/articles/fluidgrids/http://www.alistapart.com/d/fluidgrids/examples/grid/final.htmlhttp://www.designinfluences.com/fluid960gs/em设置坐标偏移。设置字体大小。target ÷ context = resultem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。比如 <div style="font-size=12px"> <span style="fontsize=2em">这里的字是24px</span> </div>em的值并不是固定的，em会继承父级元素的字体大小。
Does the image convey information that I ought to put as text in an?alt?attribute?Do I want to make sure the image always prints because without it theprintout wouldn’t make sense or be complete?Do I want to link the image?http://zomigi.com/blog/hiding-and-revealing-portions-of-images/http://www.zomigi.com/demo/crop_background_right.htmlhttp://www.zomigi.com/demo/crop_background.htmlhttp://zomigi.com/blog/foreground-images-that-scale-with-the-layout/http://www.zomigi.com/demo/scale_liquid.htmlhttp://www.zomigi.com/demo/scale_elastic_max.html100%http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.htmlhttp://zomigi.com/blog/creating-sliding-composite-images/http://www.zomigi.com/demo/composite_static.htmlhttp://www.zomigi.com/demo/composite.html
<meta name="viewport" content="width=device-width; initial-scale=1.0">我们都知道可以用::before和::after伪元素+content属性来动态显示一些内容或者做其它很酷的事情，而且在CSS 2.1中即被支持。不过content属性在CSS 2.1中只能用于这两个伪元素中，而在CSS3中，任何元素都可以使用content属性了，这个方法就是结合css3 的attr属性和HTML自定义属性的功能：<imgsrc="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">然后用media query来动态赋值：@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);}}
一个简单实现3 个步骤。http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
Respond.js，让IE6-8支持meidia queryResponsive Design Testing 简单而方便的测试网站的响应性的工具，输入网址即可看到网站在不同分辨率下的表现Resize My Browser 缩放浏览器工具，不过不支持chrome和opera浏览器Media Query Bookmarklet顾名思义，这是一个对于media query的书签工具ProtoFluid在线查看和调试网站对移动终端兼容性的工具，很赞ScreenFly和ProtoFluid类似responsivepx更直观的测试网站对不同分辨率的适配性http://quirktools.com/screenfly/

狠狠撸

Response Web Design

More Related Content

Response Web Design

Editor's Notes