Responsive 之 小试牛刀
description
Transcript of Responsive 之 小试牛刀
![Page 1: Responsive 之 小试牛刀](https://reader033.fdocuments.net/reader033/viewer/2022061421/56815328550346895dc14da9/html5/thumbnails/1.jpg)
Responsive 之小试牛刀
作者: different ( D 姐),前端工程师
博客: http://www.w3cplus.com
新浪微博: inline_block
![Page 3: Responsive 之 小试牛刀](https://reader033.fdocuments.net/reader033/viewer/2022061421/56815328550346895dc14da9/html5/thumbnails/3.jpg)
1 、 viewport
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
1. 什么是 viewport
2. 他的由来,有什么作用
3. 桌面浏览器的 viewport 跟移动 viewport 的区别
4. 扩展知识
![Page 4: Responsive 之 小试牛刀](https://reader033.fdocuments.net/reader033/viewer/2022061421/56815328550346895dc14da9/html5/thumbnails/4.jpg)
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
![Page 5: Responsive 之 小试牛刀](https://reader033.fdocuments.net/reader033/viewer/2022061421/56815328550346895dc14da9/html5/thumbnails/5.jpg)
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
![Page 6: Responsive 之 小试牛刀](https://reader033.fdocuments.net/reader033/viewer/2022061421/56815328550346895dc14da9/html5/thumbnails/6.jpg)
AlphaImageLoader 使得 ie6 透明的微软 css 过滤
.logo { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader» (src="/path/to/logo.png", sizingMethod="scale");
}
2.3 、 IE6 兼容
![Page 8: Responsive 之 小试牛刀](https://reader033.fdocuments.net/reader033/viewer/2022061421/56815328550346895dc14da9/html5/thumbnails/8.jpg)
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
![Page 9: Responsive 之 小试牛刀](https://reader033.fdocuments.net/reader033/viewer/2022061421/56815328550346895dc14da9/html5/thumbnails/9.jpg)
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
![Page 12: Responsive 之 小试牛刀](https://reader033.fdocuments.net/reader033/viewer/2022061421/56815328550346895dc14da9/html5/thumbnails/12.jpg)
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
![Page 13: Responsive 之 小试牛刀](https://reader033.fdocuments.net/reader033/viewer/2022061421/56815328550346895dc14da9/html5/thumbnails/13.jpg)
5 、 Q&A
谢谢作者: different (D 姐 )
博客: http://www.w3cplus.com新浪微博: inline_block