響應式網站設計基本觀念(4)：viewport相對寬度與相對單位
設定CSS的viewport時，會需要使用相對單位來描述。
我們之前提及的width=device-width，是一種相對寬度的觀念，在不同裝置之間轉換很好用，為什麼呢?因為如果寬度是320p的絕對單位，在寬度大於320p的裝置，內容會被拉大；在寬度小於320p的裝置，內容需要橫向滾動條才能看到整體內容。如果是相對寬度、相對單位，是一種比較、比例的概念，在每個裝置上都可以套用。
也因此，相對單位在描述頁面元素時，比絕對單位好用。
以下介紹相對單位。
1.以父元素比例計算 — 百分比
最常用的相對單位，在行動裝置上時，可用來改變網頁Viewport，讓網頁內容呈現動態縮放。
當資訊來源是設計稿的時候，你會需要轉換絕對單位長度到相對單位長度。
公式：子元素絕對單位/父元素的絕對單位=百分比例如，元件Wrapper(960px)包住了一個container(900px)，此時wrapper是父元素，container是子元素，900/960=93.75%。
2.以Viewport比例計算 — Viewport百分比
當我們想做全版的視覺效果時，會用到此種相對單位。
viewport百分比(viewport percentage lengths)，會隨著viewport的尺寸而縮放。
vw = viewport的寬度vh = viewport的高度vmin = vw或vh當中的最小值vmax = vw或vh當中的最大值
如果viewport的寬是1920像素、高是1080像素，1vw等於是 1% viewport的寬，也就是19.2像素；1vh=10.8像素。此時vh>vw，1vmax=1vw，1vmin=1vh。
3.字體相對單位 — em
以父元素的字體大小為基準。例如父元素字體為16px，在子元素1em是16px，0.5em是8px，2em是32px。
4.相對比例的反動 — 限制彈性
當網頁元素都以相對單位來控制時，會隨著比例而縮放大小。
但是如果我們不希望內容不適合變太大或太小，就需要追加設定絕對單位長度來限制最大/最小長度，如：min-width、max-width、min-height、max-height。這就是限制彈性。
(1)max-width的情境
通常我們會將網頁內容包在container中，這樣有置中效果；而width=100%是通常設定，但是當螢幕很長的時候，內容就會被拉長，這不是我們想要的。
.container {
width: 90%;
max-width: 960px;
}如果把width設定為90%，max-width設定為960px，這樣至少內容不會拉長到太誇張的地步。
(1)min-width的情境
可能用在表單的部分，當有設定min-width時，表單的寬度是決不會小於它；如果沒有設定min-width，暗示可能寬度是比較小的，因為沒有設定最小多少。
