移動設備正在取代桌面設備成為訪問互聯網的最常見終端。因此，網頁設計師不得不面對壹個難題:如何在不同尺寸的設備上呈現相同的網頁？
手機的屏幕比較小，寬度通常在600像素以下；PC的屏幕寬度壹般在1000像素以上（目前主流的寬度為1366×768），有的已經達到2000像素。同樣的內容在不同尺寸的屏幕上呈現出令人滿意的效果並不容易。
許多網站的解決方案是為不同的設備提供不同的頁面，例如移動版本或iPhone/iPad版本。這樣肯定能保證效果，但是比較麻煩，需要同時維護好幾個版本。此外，如果壹個網站有多個門戶網站，這將大大增加架構設計的復雜性。
因此，人們很早就設想有可能“壹次設計，通用應用”，使同壹網頁能夠自動適應不同尺寸的屏幕，並根據屏幕寬度自動調整布局。
首先，了解什麽是“適應性網頁設計”
自2010起，Ethan Marcotte提出了“響應式網頁設計”壹詞，指能夠自動識別屏幕寬度並做出相應調整的網頁設計。
他舉了壹個例子，裏面是《福爾摩斯歷險記》中六個主角的頭。如果屏幕寬度大於1300像素，6張圖片將並排排列成壹行。
如果屏幕寬度在600像素和1300像素之間，則六幅圖片將分成兩行。
如果屏幕寬度介於400像素和600像素之間，導航欄將移動到頁面頂部。
如果屏幕寬度小於400像素，六幅圖片將分成三行。
媒體查詢上有更多這樣的例子
這裏還有壹個測試小工具，可以在壹個網頁上同時顯示不同分辨率屏幕的測試結果。我建議安裝它。
其次，有必要允許自動調整網頁寬度。
“適應性網頁設計”是如何工作的？其實並不難。
首先，在網頁代碼的頭部添加壹行viewport meta標記。
視區是網頁的默認寬度和高度。上面壹行代碼的意思是網頁的寬度默認等於屏幕寬度（寬度=設備-寬度），原始縮放比例（initial-scale=1）為1.0，即網頁的初始大小占屏幕面積的100%。
所有主流瀏覽器都支持此設置，包括IE9。對於那些老的瀏覽器（主要是IE6、IE7和IE8），妳需要使用css3-mediaqueries.js
第三，設計時不能使用絕對寬度。
因為網頁將根據屏幕寬度調整其布局，所以不可能使用絕對寬度布局或具有絕對寬度的元素。這壹條非常重要。
具體來說，CSS代碼不能指定像素寬度:
寬度:xxx px
只能指定百分比寬度:
寬度:xx %；
或者
寬度:自動；
第四、字體的相對大小
字體不能使用絕對大小（px），只能使用相對大小（em）。
正文{
字體:normal 100% Helvetica，Arial，無襯線字體；
}
上述代碼指定字體大小為默認頁面大小的100%，即16像素。
h1 {
字體大小:1.5 em；
}
那麽，h1的大小是默認大小的1.5倍，即24個像素（24/16=1.5）。
小{
字體大小:0.875em
}
小元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。
動詞 （verb的縮寫）流體網格或瀑布流
“流動布局”的含義是每個區塊的位置是浮動的，而不是固定的。
。主{
浮動:對；
寬度:70%；
}
。左欄{
浮動:左；
寬度:25%；
}
浮動的優點是，如果寬度太小而無法容納兩個元素，後壹個元素將自動滾動到前壹個元素的下部，並且不會在水平方向上溢出，從而避免了水平滾動條的出現。
此外，使用絕對定位（position: absolute）應該非常小心。
第六，有選擇地加載CSS
“自適應網頁設計”的核心是CSS3引入的媒體查詢模塊。
它的意思是自動檢測屏幕寬度，然後加載相應的CSS文件。
上面的代碼意味著如果屏幕寬度小於400像素（max-device-width: 400px），將加載tinyScreen.css文件。
如果屏幕寬度介於400像素和600像素之間，請加載smallScreen.css文件。
除了加載帶有html標簽的CSS文件外，您還可以在現有的CSS文件中加載它們。
@ import URL（“tiny screen . CSS“）屏幕和（max-device-width:400 px）；
七、CSS @media規則
在同壹個CSS文件中，還可以根據不同的屏幕分辨率選擇應用不同的CSS規則。
@媒體屏幕和（最大設備寬度:400像素）{
。列{
浮動:無；
寬度:自動；
}
#側欄{
顯示:無；
}
}
上面的代碼意味著如果屏幕寬度小於400像素，則列塊是浮動的（float:none），寬度會自動調整（width:auto），並且不顯示側欄塊（display:none）。
八、自適應圖像（流體圖像）
除了布局和文本，“自適應網頁設計”還必須實現圖片的自動縮放。
它只需要壹行CSS代碼:
img { max-width:100%；}
這壹行代碼對於網頁中嵌入的大多數視頻也有效，因此可以寫成:
img，object { max-width:100%；}
舊版本的IE不支持最大寬度，因此必須寫成:
img { width:100%；}
此外，在windows平臺上縮放圖片時，可能會出現圖像失真。此時，您可以嘗試使用IE的專有命令:
img { -ms-interpolation-mode:雙三次；}
或者，伊桑·馬科特的imgSizer.js。
addLoadEvent（function（）{
var imgs = document . getelementbyidx _ x（“content“）。getElementsByTagName _ r（“img“）；
img sizer . collate（imgs）；
});
但是，如果可能的話，最好根據不同尺寸的屏幕加載不同分辨率的圖片。在服務器端和客戶端都有很多方法可以做到這壹點。
只要妳遵循這八個設計指南，我相信妳可以很快設計出適應性網頁。