Responsive 之 小试牛刀
description
Transcript of Responsive 之 小试牛刀
Responsive 之小试牛刀
作者: different ( D 姐),前端工程师
博客: http://www.w3cplus.com
新浪微博: inline_block
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 、响应式设计布局
参考: 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.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