1.允許網頁寬度自動調整
自適應網頁設計」到底是怎麼做到的？其實並不難。
首先，在網頁**的頭部，加入一行viewport元標籤。
viewport是網頁預設的寬度和高度，上面這行**的意思是，網頁寬度預設等於螢幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔螢幕面積的100%。
所有主流瀏覽器都支援這個設定，包括ie9。對於那些老式瀏覽器（主要是ie6、7、8），需要使用css3-mediaqueries.js。
2.不使用絕對寬度
由於網頁會根據螢幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。具體說，css**不能指定畫素寬度：
width:*** px;
只能指定百分比寬度：
width: xx%; 或者
width:auto;
3.相對大小的字型
字型也不能使用絕對大小（px），而只能使用相對大小（em）。
body
上面的**指定，字型大小是頁面預設大小的100%，即16畫素。 h1
然後，h1的大小是預設大小的1.5倍，即24畫素（24/16=1.5）。
small
small元素的大小是預設大小的0.875倍，即14畫素（14/16=0.875）。
4.流動布局（fluid grid）
「流動布局」的含義是，各個區塊的位置都是浮動的，不是固定不變的。
.main
.leftbar
float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢位），避免了水平滾動條的出現。
另外，絕對定位（position: absolute）的使用，也要非常小心。
5.選擇載入css
自適應網頁設計」的核心，就是css3引入的media query模組。
它的意思就是，自動探測螢幕寬度，然後載入相應的css檔案。
上面的**意思是，如果螢幕寬度小於400畫素（max-device-width: 400px），就載入tinyscreen.css檔案。
如果螢幕寬度在400畫素到600畫素之間，則載入smallscreen.css檔案。
@import url("tinyscreen.css") screen and (max-device-width: 400px);
除了用html標籤載入css檔案，還可以在現有css檔案中載入。
6.css的@media規則
同乙個css檔案中，也可以根據不同的螢幕解析度，選擇應用不同的css規則。
@media screen and (max-device-width: 400px)
#sidebar
}上面的**意思是，如果螢幕寬度小於400畫素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。
7.的自適應（fluid image）
響應式網頁
1.將width改為max width，來適應螢幕的變動來改變自身寬度等。其他亦然。查詢，參考部分bootstarp框架 當頁面大於1200px時，大螢幕，主要顯示pc端 media min width 1200px 在992 和1199 畫素之間的螢幕裡，中等螢幕，解析度低的pc media mi...
響應式網頁
做響應式網頁需要注意 1.使用百分比來代替固定長度 2.當你需要在較大解析度下得到固定寬度時，使用max width而不是width，因為他可以適應較小的解析度 3.不要忘記給替換元素 eg.img,object,video,iframe 設定乙個max width，值為100 4.背景圖鋪滿整個容...
axure網頁預覽 響應式網頁設計指南
如何理解響應式設計 rwd 響應式網頁設計的概念最初是由 ethan marcotte 提出，從設計的角度引領我們思考 為什麼一定要為每個使用者分別做一套設計方案呢？是否可以有一種設計能夠根據不同裝置環境自動響應以及調整顯示？特別是隨著移動網際網路的飛速發展，響應式 web 設計不僅僅是關於螢幕解析...