viewport是使用者網頁的可視區域。翻譯為中文叫做「視區」
手機瀏覽器是把頁面放在乙個虛擬的「視窗」（viewpoint）中，通常這個虛擬的「視窗」（viewport）比螢幕寬，這樣就不用把每個網頁擠到很小的視窗中，使用者可以通過平移和縮放來看網頁的不同部分。
viewport的**如下：
"viewport" content=
"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
屬性名取值
描述width
正整數 或 device-width
定義視口的寬度，單位為畫素
height
正整數 或 device-height
定義視口的高度，單位為畫素，一般不用
initial-scale
[0.0 - 10.0]
定義初始縮放值
minimun-scale
[0.0 - -10.0]
定義縮小最小比例，它必須小於或等於maximun-scale的設定
maximun-scale
[0.0 - 10.0]
定義放大最大比例，它必須大於或等於minimun-scale設定
user-scalable
yes/no
定義是否允許使用者手動縮放頁面，預設值yes
em是css3新增的乙個相對單位（root em，根em）,使用rem為元素設定字型大小時，是相對大小，但相對的只是html根元素。通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層復合的連鎖反應。
目前，除了ie8及更早版本外，所有瀏覽器均已支援rem。對於不支援它的瀏覽器多寫乙個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字型大小。下面就是乙個例子：
p通常情況下，為了便於計算數值則使用62.5%，即預設的10px作為技術。當然這個基數可以為任何數值，視具體情況而定。設定方法如下：
html(
function
(doc, win);if
(!doc.addeventlistener)
return
; win.
addeventlistener(
resizeevt, recalc,
false);
doc.
addeventlistener(
'domcontentloaded'
, recalc,
false);
})(document, window)
;
**查詢也是css3的方法，我們要解決的問題是適應手機螢幕，這個**查詢正是為解決這個問題而生。**查詢的功能就是為不同的**設定不同的css樣式，這裡的「**」包括頁面尺寸，裝置螢幕尺寸等。
例如：如果瀏覽器視窗小於 500px, 背景將變為淺藍色：
@media only screen and (max-width: 500px)
}
百分比指的是父元素，所有百分比都是這樣的。子元素寬度50%，那麼父元素的寬度就是100%；
所以body預設寬度是螢幕寬度（pc中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了，這只適合布局簡單的頁面，複雜的頁面實現很困難。
原文發布時間為：2023年12月24日
移動頁面HTML5自適應手機螢幕寬度
標籤 網上關於這方面的文章有很多，重複的東西本文不再贅述，僅提供思路，並解釋一些其他文章講述模糊的地方。1 使用meta標籤，這也是普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。首先解釋該標籤的含義 解釋 c...
移動頁面HTML5自適應手機螢幕寬度
網上關於這方面的文章有很多，重複的東西本文不再贅述，僅提供思路，並解釋一些其他文章講述模糊的地方。1 使用meta標籤，這也是普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。首先解釋該標籤的含義 解釋 cont...
移動頁面自適應手機螢幕寬度HTML5開發
網上關於這方面的文章有很多，重複的東西本文不再贅述，僅提供思路，並解釋一些其他文章講述模糊的地方。1 使用meta標籤，這也是普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。首先解釋該標籤的含義 解釋 cont...