http://techbus.safaribooksonline.com/book/web-design-and-development/9780133053029
ch1. 立論
我們從現實生活中借了「畫布」這種「在固定（材質、尺寸、形體）的載體上創作」的概念來，並且企圖於數位媒體上複製這種想法。但在 Web 上，我們對於創作的載體（瀏覽器、螢幕，甚至可用的字體、互動的形態等）無法控制那麼多。
因此為了控制好創作的載體，讓各種不同的載體有一樣的外觀，我們將字體單位下成 px、做成固定尺寸的圖、設計固定尺寸的版面。一旦螢幕尺寸小於我們的預期，那訪客就只能看到部分頁面了，這甚至可能影響到網站營運（試想有重要的部分超過可視範圍）。
But first, we must “accept the ebb and flow of things.” — John Allsopp
獨立的 Mobile 版，通常只是代表網站製作者又再一次地「假設」了另一個固定的載體。當這個本來被設計給 320px 寬螢幕載體的頁面被分享到 SNS 上、並且由桌機使用者開啟閱讀時，會是另一種不適。
過去，建築上的設計會屹立數十年甚至數百年不動，但現在有新式的「回應式建築」（Responsive Architecture）概念，讓建築回應人的狀況而改變，例如為了回應空間視覺上的需求而動態改變透明度的玻璃等等。此種回應式建築改變設計師的思維，為回應人的行為改變空間設計、而非設計空間以形塑人的行為。
回應式設計的三要素：
- 有彈性的、以網格規劃的版面
- 有彈性的圖片與多媒體尺寸
- CSS3 media-query
ch2. Grid
先說明 Grid 在設計上的重要性，接著開始實作
- 文字尺寸：將絕對單位 px 化為相對單位 em 的步驟。目標大小px / 基底大小px = em 數值，小數點以下位數可以盡可能提供給瀏覽器。
- 區塊尺寸：將絕對單位 px 化為相對單位 %。（總寬度設為 90%，並置中，這樣兩邊各留 5% 白邊）目標大小px / 基底大小px / 100 = % 數值，小數點以下位數可以盡可能提供給瀏覽器。
- 設定某元素 margin 之相對單位值時，其尺寸計算是相對於此元素之容器的寬度
- 設定某元素 padding 之相對單位值時，其尺寸計算是相對於此元素的寬度
ch3. Image
max-width: 100% 可以確保超過版面的大圖不會撐開破版，IE6 不支援這個東西，改用 width: 100%; 可以處理，不過大圖縮小沒問題、小圖卻也會被放大。純 CSS 解法是另外設 class 給大圖（白名單解法）。
IE7- 跟 Fx2- 對這種動態縮放圖片有縮放品質問題，IE7- 可以靠 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png",sizingMethod="scale") ; 改善問題，雖然可能要付出效能上的代價。在頁面上放 http://bkaprt.com/rwd/16/ 就可以自動在 IE7- 為動態縮放圖型加上這玩意。
用背景圖「偽裝」等高雙欄的方式依然可行，但原來做給 fixed-width 的背景圖要以等比例方式重新考慮：
- 做一張超級寬的背景，例 3000px
- 原來的兩欄假定為 568px+332px（共 900px）, 則依據比例將此超級大圖的兩欄分界定於 1893px
- 依然將此圖設定為背景，只是擺在 568/900 = 63.11111111111% 的地方
這樣即使可見範圍寬了窄了，在 63.1111% 的地方仍會是兩個欄位的分界點。（Bob: 多欄位的狀況必有最小欄寬的問題，此依 media-query 將必然小於最小欄寬的狀況改以另一組 CSS 替代即可。）
若真有必要讓背景圖有縮放能力，則可採用 CSS3 的 background-size 或以 JavaScript 動態計算（http://srobbin.com/jquery-plugins/backstretch/），又或者用 media-query 視情況調整。怎麼選擇端視需求。
也可以考慮在 container 用 overflow:hidden，一樣是看需求。
有些狀況，例如使用資料太豐富的圖片（infograph 等），會讓縮放或 overflow:hidden 都沒什麼用。這時可能要考慮針對不同尺寸設計不同版本的圖、再依情況送出給使用者。
Media Queries
http://dogspt.wikidot.com
http://lazhspf.wikidot.com
http://changzh.wikidot.com
http://shenyas.wikidot.com
