Responsive小试牛刀.pptVIP

Responsive之小试牛刀 作者：different（D姐），前端工程师 博客： 新浪微博：inline_block 提纲 Viewport浅谈 Fluid img处理 响应式布局 响应式布局面临的几个问题 1、viewport meta name=viewport content=width=device-width, initial-scale=1.0 1.什么是viewport 2.他的由来，有什么作用 3.桌面浏览器的viewport跟移动viewport的区别 4.扩展知识 1.4 扩展知识 1.css像素与设备物理像素的区别 /css/A-pixel-is-not-a-pixel-is-not-a-pixel.html 2.viewport相关内容链接,详见 /css/advanced-html-css-lesson4-responsive-web-design.html#viewport /library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html /enUS/docs/Mobile/Viewport_meta_tag 2、Fluid img处理 1.通常处理img{max-width:100%;} 2.需要注意的地方 3.IE6兼容 参考：/article/fluid-images /blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design /devnet/dreamweaver/articles/introducing-media-queries-pt2.html AlphaImageLoader使得ie6透明的微软css过滤 .logo { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader? (src=/path/to/logo.png, sizingMethod=scale); } 2.3、IE6兼容 3、响应式布局 1.设计布局 2.结构布局——grid 3.1、响应式设计布局 参考： /ff/entry.asp?1514 /2012/02/29/40-examples-of-brilliant-responsive-website-layouts/ /source/responsive-resources-design-layout.html 3.2、响应式结构布局 参考：/demo/ http://responsive.gs/ / /resource/tags/259.html /css3/responsive-design-with-css3-media-queries /content/css3-media-queries 1.Grid 2.Media Queries 4、响应式布局面临的几个问题 1.Fluid img 2.Fluid 其他媒体元素 3.导航处理 4.2、Fluid 其他媒体元素 1.流式媒体 2. iframe和嵌入媒体 4.3、导航处理 参考：/source/20-useful-responsive-menu-navigation-tutorials.html /css3/responsive-mobile-navigation-menumethod s-and-solutions.html 5、QA 谢谢 作者：different (D姐) 博客： 新浪微博：inline_block