自適應頁面

自適應設計

能夠在一張網頁上，同時顯示不一樣分辨率屏幕的測試效果的東西

http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/

容許網頁寬度自動調整

<meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），

原始縮放比例（initial-scale=1）爲1.0，即網頁初始大小佔屏幕面積的100%。

全部主流瀏覽器都支持這個設置，包括IE9。對於那些老式瀏覽器（主要是IE六、七、8）用

　　<!--[if lt IE 9]>
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]-->

不使用絕對寬度  使用百分比。字體用em。

使用流動佈局  float 。絕對定位（position: absolute）的使用當心，會讓文本脫離文本流。

選擇加載CSS

　　　　<link rel="stylesheet" type="text/css"
　　　　media="screen and (max-device-width: 400px)"
　　　　href="tinyScreen.css" />

　　　　<link rel="stylesheet" type="text/css"
　　　　media="screen and (min-width: 400px) and (max-device-width: 600px)"
　　　　href="smallScreen.css" />

　　　　或

　　　　@media screen and (max-device-width: 400px) {

　　　　.column {
　　　　　　float: none;
　　　　　　width:auto;
　　　　}

　　　　#sidebar {
　　　　　　display:none;
　　　　}

　　}

圖片的自適應

img { max-width: 100%;}

這行代碼對於大多數嵌入網頁的視頻也有效

img, object { max-width: 100%;}

老版本的IE不支持max-width

img { width: 100%; }

詳見

http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html