1 / 13

Responsive 之 小试牛刀

Responsive 之 小试牛刀. 作者： different （ D 姐），前端工程师 博客： http://www.w3cplus.com 新浪微博 ： inline_block. 提纲. Viewport 浅谈 Fluid img 处理 响应式布局 响应式布局面临的几个问题. 1、 viewport. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 1. 什么是 viewport 2. 他的由来，有什么作用

knoton
Download Presentation

Responsive 之 小试牛刀

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Responsive之小试牛刀 作者：different（D姐），前端工程师 博客：http://www.w3cplus.com 新浪微博：inline_block

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

  3. 1、viewport <meta name="viewport" content="width=device-width, initial-scale=1.0"> 1.什么是viewport 2.他的由来，有什么作用 3.桌面浏览器的viewport跟移动viewport的区别 4.扩展知识

  4. 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/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html https://developer.mozilla.org/enUS/docs/Mobile/Viewport_meta_tag

  5. 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/introducing-media-queries-pt2.html

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

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

  8. 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

  9. 3.2、响应式结构布局 1.Grid 2.Media Queries 参考：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

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

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

  12. 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

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

More Related