作者：different（D姐），前端工程师 博客： 新浪微博：inline_block

Presentation on theme: "作者：different（D姐），前端工程师 博客： 新浪微博：inline_block"— Presentation transcript:

1 作者：different（D姐），前端工程师 博客：http://www.w3cplus.com 新浪微博：inline_block
Responsive之小试牛刀 作者：different（D姐），前端工程师 博客： 新浪微博：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像素与设备物理像素的区别 2.viewport相关内容链接,详见

5 2、Fluid img处理 1.通常处理img{max-width:100%;} 2.需要注意的地方 3.IE6兼容 参考：

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

9 3.2、响应式结构布局 1.Grid 2.Media Queries 参考：http://www.columnal.com/demo/

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

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

12 4.3、导航处理 参考： s-and-solutions.html

13 5、Q&A 谢谢 作者：different (D姐) 博客： 新浪微博：inline_block