Slide 1

Slide 1 text

Responsive之小试牛刀 作者:different(D姐),前端工程师 博客:http://www.w3cplus.com 新浪微博:inline_block

Slide 2

Slide 2 text

提纲 Viewport浅谈 Fluid img处理 响应式布局 响应式布局面临的几个问题

Slide 3

Slide 3 text

1、viewport 1.什么是viewport 2.他的由来,有什么作用 3.桌面浏览器的viewport跟移动viewport的区别 4.扩展知识

Slide 4

Slide 4 text

1.4 扩展知识 1.css像素与设备物理像素的区别 http://www.w3cplus.com/css/A-pixel-is-not-a-pixel-is- not-a-pixel.html 2.viewport相关内容链接,详见 http://www.w3cplus.com/css/advanced-html-css-lesson4- responsive-web-design.html#viewport http://developer.apple.com/library/safari/#documentation/A ppleApplications/Reference/SafariWebContent/UsingtheVi ewport/UsingtheViewport.html https://developer.mozilla.org/enUS/docs/Mobile/Viewport_ meta_tag

Slide 5

Slide 5 text

2、Fluid img处理 1.通常处理img{max-width:100%;} 2.需要注意的地方 3.IE6兼容 参考:http://alistapart.com/article/fluid-images http://demosthenes.info/blog/586/CSS-Fluid-Image- Techniques-for-Responsive-Site-Design http://www.adobe.com/devnet/dreamweaver/articles/introdu cing-media-queries-pt2.html

Slide 6

Slide 6 text

AlphaImageLoader使得ie6透明的微软css过滤 .logo { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoade r» (src="/path/to/logo.png", sizingMethod="scale"); } 2.3、IE6兼容

Slide 7

Slide 7 text

3、响应式布局 1.设计布局 2.结构布局——grid

Slide 8

Slide 8 text

3.1、响应式设计布局 参考: http://www.lukew.com/ff/entry.asp?1514 http://speckyboy.com/2012/02/29/40-examples-of-brilliant-responsive- website-layouts/ http://www.w3cplus.com/source/responsive-resources-design-layout.html

Slide 9

Slide 9 text

3.2、响应式结构布局 参考:http://www.columnal.com/demo/ http://responsive.gs/ http://www.responsivegridsystem.com/ http://www.w3cplus.com/resource/tags/259.html http://www.w3cplus.com/css3/responsive-design-with-css3-media- queries http://www.w3cplus.com/content/css3-media-queries 1.Grid 2.Media Queries

Slide 10

Slide 10 text

4、响应式布局面临的几个问题 1.Fluid img 2.Fluid 其他媒体元素 3.导航处理

Slide 11

Slide 11 text

4.2、Fluid 其他媒体元素 1.流式媒体 2. iframe和嵌入媒体

Slide 12

Slide 12 text

4.3、导航处理 参考:http://www.w3cplus.com/source/20-useful- responsive-menu-navigation-tutorials.html http://www.w3cplus.com/css3/responsive-mobile- navigation-menumethod s-and-solutions.html

Slide 13

Slide 13 text

5、Q&A 谢谢 作者:different (D姐) 博客:http://www.w3cplus.com 新浪微博:inline_block