宽度适应屏幕大小
http://www.alistapart.com/articles/responsive-web-design
手机浏览器会默认缩小屏幕，设置以下meta可以忽略次行为
<meta name="viewport" content="width=device-width"/>
也可以直接用css实现
@viewport {width: device-wdith;}
http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport
http://dev.w3.org/csswg/css-device-adapt
响应式menu
http://css-tricks.com/convert-menu-to-dropdown
http://bradfrostweb.com/blog/web/responsive-nav-patterns
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design
http://www.lukew.com/ff/entry.asp?1514
媒体查询
https://www.w3.org/TR/css3-mediaqueries/
<link href="css/small.css" rel="stylesheet" media="(max-width: 480px)" />
<link href="css/small.css" rel="stylesheet" media="(max-width: 768px) and (min-width:481px)" />
@import url(css/small.css) (max-width: 320px);
@import url(css/small.css) (max-width: 768px) and (min-width:481px);
@media (max-width: 768px) and (min-width:481px) {
...
}
流式图片
http://picture.responsiveimages.org
http://www.w3.org/community/respimg
http://adaptive-images.com
网友评论