RWD Responsive Web Design 中文翻譯為響應式網頁設計或是適應性網頁設計，由於行動裝置盛行，為了能夠同時讓手機、平板電腦、一般PC電腦的瀏覽器能夠在不同的螢幕大小的條件下，都能夠在不縮放以及橫向捲動畫面的要求下，以最佳瀏覽體驗瀏覽一個網頁，同樣的網頁內容必須再藉由 RWD 要求要注意的幾項設計重點。

但我們倒可以直接將 RWD 翻譯為「負責任」的網頁設計，因為如果使用者同時會有不同螢幕大小的設備瀏覽網頁，網站設計者就必須「承擔起責任」，讓使用者能以最佳瀏覽體驗瀏覽網頁。

Ethan Marcotte

RWD 最早是在 2010 年由 Ethan Marcotte: A List Apart 提出的一項概念。

在文章的結論中提到 Fluid grids, flexible images, and media queries 是進行 RWD 時最重要的三項技術。

什麼時候要注意 RWD

在進行網頁設計前，有幾項設計需求是要先確認的，否則就可以決定不需要多花時間與人力進行 RWD 開發。

網站有沒有行動版的需求？
如果在開發時就已經確定這個網站面對的使用者會使用手機、平板或是PC這三種類形的設備的某一種的瀏覽器，那麼我們就沒有必要花時間進行RWD
行動版跟PC版的網頁內容重複很多嗎？
在一個網頁上進行 RWD，就表示我們在處理一個網頁的內容，但不同設備的呈現方式的問題。如果行動版的網頁內容在設計初期就決定要給使用者完全不同的呈現方式，那倒不如在使用者進入網頁後，就根據 media query 的結果，直接將使用者導向到不同的兩個網頁，一個是進入 PC 的網頁，一個是進入行動版的網頁。

如何實踐 RWD

以下內容是從九個適應性設計小撇步，把你的網站打造成變形金剛！（上篇）以及九個適應性設計小撇步，把你的網站打造成變形金剛！（下篇）兩篇文章中精簡得來的筆記。

讓圖片維持比例自動縮放

使用 img 標籤放置圖片
當外層元素寬度縮到小於圖片時，圖片會自動縮小，不設定 width 屬性（或設定為 auto ），讓圖片維持不超過原始大小的寬高。
```
 <img id="imageid" src="xxx.png"></img>
```
```
 #imageid {
     height: auto;
     max-width: 100%;
 }
```
使用 CSS background 屬性
可彌補 img 無法針對螢幕大小指定合適圖片的缺點。background-size 內兩個值分別代表背景圖的寬高。background-position 的兩個數值則分別指定背景圖片的水平及垂直位置，50% 表示置中。
```
 <div id="divid"></div>
```
```
 #divid {
     background-image: url(xxx.png);
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background-size: 100% auto;
     display: block;
     height: 100px;
     width: 100%;
 }
```

讓 div 區塊內容自動往下排列

用 float 讓 div 區塊由右至左排列

用 inline-block 讓 div 區塊由左至右排列

讓 div 區塊置中

使用 display: block 時－固定寬度加上 margin: auto 屬性
適用單一區塊水平置中，區塊的寬度設定為某個「小於上層元素」的數值，加上 margin: auto
使用 display: inline-block 時－在外層設定 text-align: center
同一行內的多個 inline-block 可以一起置中
使用絕對定位時－margin: auto 加上左右定位
用 position: absolute 做絕對定位，固定寬度，再加上 margin: auto，再設定左右位置兩個數值－ left: 0; right: 0;

文字對齊

text-align: center 可以置中文字
text-align: justify 可左右分散對齊一整段文字

只要將上層元素設定為 display: table ，並在文字區塊元素上設定 display: table-cell; vertical-align: center; 即可將多行文字垂直置中。

<div id="content">
    <div id="vertical-text">
        大量的文字。
    </div>
</div>

#content > #vertical-text {
    display: table-cell;
    vertical-align: middle;
}

#content {
    border: 1px dotted gray;
    display: table;
    height: 240px;
    width: 100%;
}

排版避免設定高度及絕對位置，寬度設定儘量集中

利用 media query 修改寬度的 css class，不設定高度可讓區塊的內容自動將元件高度撐開。

當螢幕寬度小於 540px 時，文字區塊的寬度就會縮成 400px

.container {
    width: 500px;
}

@media only screen and (max-width: 540px) {
    .container {
        width: 400px;
    }
}

@media only screen and (max-width: 440px) {
    .container {
        width: 300px;
    }
}

隱藏暫不需要的選單、點擊後展開隱藏的頁籤

寬度拉到小於 400px 時，原本左邊的綠色選單就不見了，縮成一個綠色選單鈕，滑鼠放上去時選單就會自動展開

展開頁籤的內容

因為手機上畫面空間不足，通常不適合使用頁籤，這時不如把內容直接展開來，寬度縮到 400px 以下時三個頁籤的內容就會展開來。

使用 Firefox 特有開發工具

Firefox 15.0 以後，按下快速鍵 Ctrl+Shift+M (Windows 及 Linux 平台) 就可以使用適應性設計檢視 (Responsive Design View)。

References

響應式網頁設計 wiki

RWD 流言終結者

cctg

2015/3/23

RWD Responsive Web Design