當我們在做網頁時，應當充分考慮到網頁自適應的問題

否則可能會出現同一個網頁在不同的螢幕尺寸上排版佈局混亂的情況

方案一：用比例控制大小

在網頁程式碼的頭部，加入一行viewport元標籤

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

以下是相關的屬性的解釋：

width：控制 viewport 的大小，可以指定的一個值，如 600，或者特殊的值，如 device-width 為裝置的寬度（單位為縮放為 100% 時的 CSS 的畫素）

height：和 width 相對應，指定高度

initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例，1.0就是佔網頁的100%

maximum-scale：允許使用者縮放到的最大比例

minimum-scale：允許使用者縮放到的最小比例

user-scalable：使用者是否可以手動縮放

用百分比去寫元素的寬度，不要寫絕對寬度

.myDiv {

width: 30%;

}

這裡需要注意div寬度的計算方法，CSS盒式模型的寬度設定有兩種模式：

width = 內容寬度

實際總寬度 = width + padding + border

這種情況下設定了 width 後，內容寬度不變，而調整 padding 和 border 都會使得div的實際總寬度變化

width = 實際總寬度

width = 內容寬度 + padding + border

這種情況下設定了 width 後，div總寬度不變

可以透過設定 css 的 box-sizing 屬性來控制

content-box：width = 內容寬度 (預設)

border-box：width = 實際總寬度

讓子元素撐起父元素的高度，而不要寫絕對高度

.parent {

width: 30%;

}

.child {

width:100%;

height:100px;

}

**字型使用相對大小 "em" 或 "rem" **

h1 {

font-size: 2rem;

}

瀏覽器預設字型為 16px ，2rem 即 2 * 16px = 32px

em（font size of the element）是指相對於父元素的字型大小的單位，如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸，因此 em 的大小並不是固定的

rem（font size of the root element）是指相對於根元素的字型大小的單位

目前，除了IE8及更早版本外，所有瀏覽器均已支援rem。對於不支援它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字型大小。

h1 {

font-size: 32px;

font-size: 2rem;

}

圖片的大小也用百分比表示

img {

width: 100%;

}

也可以設定 max-width ，這樣一來圖片最大不會超過原始尺寸，避免圖片由於放大而模糊

img {

max-width: 100%;

width: auto;

}

方案二：使用媒體查詢 (CSS3 @media 查詢)

當網頁需要在移動端和PC端展示時，由於二者螢幕尺寸差別較大，可能需要用兩種不同的佈局才能更加友好地展示內容

此時可以使用媒體查詢來檢測螢幕(或瀏覽器視窗)的大小，然後採用相應的css樣式來渲染頁面

舉個例子,當瀏覽器視窗小於 500px 時，背景變為藍色：

@media only screen and (max-width: 500px) {

body {

background-color: lightblue;

}

}