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. 他的由来，有什么作用

3. 桌面浏览器的 viewport 跟移动 viewport 的区别

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

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

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 、响应式设计布局

参考： http://www.lukew.com/ff/entry.asp?1514http://speckyboy.com/2012/02/29/40-examples-of-brilliant-responsive-website-layouts/http://www.w3cplus.com/source/responsive-resources-design-layout.html

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-querieshttp://www.w3cplus.com/content/css3-media-queries

1.Grid

2.Media Queries

4 、响应式布局面临的几个问题

1.Fluid img

2.Fluid 其他媒体元素

3. 导航处理

4.2 、 Fluid 其他媒体元素

1. 流式媒体

2. iframe 和嵌入媒体

4.3 、导航处理

参考： http://www.w3cplus.com/source/20-useful-responsive-menu-navigation-tutorials.htmlhttp://www.w3cplus.com/css3/responsive-mobile-navigation-menumethods-and-solutions.html

5 、 Q&A

谢谢作者： different (D 姐 )

博客： http://www.w3cplus.com新浪微博： inline_block