寬度適應屏幕大小

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

手機瀏覽器會默認縮小屏幕，設置以下meta可以忽略次行為

<meta name="viewport" content="width=device-width"/>

也可以直接用css實現(xiàn)

@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