一、
其中：width - viewport的寬度
height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許使用者縮放到的最小比例
maximum-scale - 允許使用者縮放到的最大比例
user-scalable - 使用者是否可以手動縮放；
二、所有主流瀏覽器都支援這個設定，包括ie9。對於那些老式瀏覽器（主要是ie6、7、8）需要使用css3-mediaqueries.js。
為了讓低於 ie9 版本 ie 瀏覽器 支援, , , 等 html5 標籤加上一下**：
三、不使用絕對寬度:由於網頁會根據螢幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。四、
上面的**意思是，如果螢幕寬度小於400畫素（max-device-width: 400px），就載入tinyscreen.css檔案。
如果螢幕寬度在400畫素到600畫素之間，則載入smallscreen.css檔案。
除了用html標籤載入css檔案，還可以在現有css檔案中載入。
@import url("tinyscreen.css") screen and (max-device-width: 400px);
五、css的@media規則
同乙個css檔案中，也可以根據不同的螢幕解析度，選擇應用不同的css規則。
@media screen and (max-device-width: 400px)
上面的**意思是，如果螢幕寬度小於400畫素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。
六、的自適應（fluid image）
除了布局和文字，"自適應網頁設計"還必須實現的自動縮放。
這只要一行css**：
img
img, object
老版本的ie不支援max-width，所以只好寫成：
img
img
或者，ethan marcotte的imgsizer.js。
addloadevent(function() {
var imgs = document.getelementbyid("content").getelementsbytagname("img");
imgsizer.collate(imgs);
不過，有條件的話，最好還是根據不同大小的螢幕，載入不同解析度的。
HTML網頁設計自動適應螢幕寬度
允許網頁寬度自動調整 自適應網頁設計 到底是怎麼做到的？其實並不難。首先，在網頁 的頭部，加入一行viewport元標籤 是網頁預設的寬度和高度，上面這行 的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 initial scale 1 為1.0，即網頁初始大小...
網頁寬度自動適應手機螢幕寬度
在網頁的中增加以上這句話，可以讓網頁的寬度自動適應手機螢幕的寬度。其中 width device width 表示寬度是裝置螢幕的寬度 initial scale 1.0 表示初始的縮放比例 minimum scale 0.5 表示最小的縮放比例 maximum scale 2.0 表示最大的縮放比...
html網頁寬度自動適應手機螢幕
可以通過設定螢幕的縮放比例來實現 一 使用meta標籤，這也是普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。1 通過設定請求頭實現 在網頁的中增加以上這句話，可以讓網頁的寬度自動適應手機螢幕的寬度。其中 wi...