Chapter 14 响应式web

宽度适应屏幕大小

http://www.alistapart.com/articles/responsive-web-design

手机浏览器会默认缩小屏幕，设置以下meta可以忽略次行为

也可以直接用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/

@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