譯者按：「金發女孩」（Goldilocks）源自《三隻熊》——坐三把椅子、喝三碗湯、睡三張床，前兩次不是太大/太燙就是太小/太涼，第三次剛剛好。作者以此隱喻：將複雜設備情況簡化為太大、太小、剛好三態，這種方法「剛好」適配所有設備。

方法論大於技術

本文提出「通用性設計」思路及具體實現方案——先基於可讀性設計，再按三態分別處理。具體技術實現、性能問題不在討論範圍。
舊思路參考：320 and up（基於熱門設備尺寸）。

現狀與痛點

• 全球 4 億+ 移動設備，不能假設僅在中等分辨率桌面瀏覽
• Ethan Marcotte 提出響應式設計（RWD）：單一代碼庫適配所有設備
• 但主流 RWD 仍基於熱門設備尺寸用像素斷點，隨設備迭代快速過時

兩大易變因素的陷阱

1. 設備分辨率：成千上萬設備無法全覆蓋，選幾款熱門→新分辨率出現即過時
2. 像素非固定：iPhone 上 16px 文字僅為 MacBook 60% 大小。以像素為單位→不同設備效果不一致，損害可讀性/可用性

設備不重要：基於內容設計

Mark Boulton 主張「從內容向外設計，而非從畫布向內」。實踐路徑：

1. 從最常見內容形式——段落元素開始
2. 保留瀏覽器默認字體大小（廠商/用戶已設為最適閱讀值），全局採用 em 單位 → 設計獨立於分辨率
3. max-width: ~30em 限制段落行寬（≈66 字符最佳可讀性） → 單欄最優寬度

「金發女孩」三態處理（Media Queries 實施）

太大：多欄佈局

單欄 28em + 雙側 1em 邊距 → 視窗 > 45em 時切三欄：欄寬 13.5em、間距 1em、主內容佔兩欄（保留最優閱讀寬度）。

太小：榨乾空間

• 外邊距減半（保留呼吸感）
• 懸掛標點改為行內（防截斷）

剛好：單欄完美

空間匹配單欄最優寬度 → 什麼都不用做，去喝茶。

優勢總結

• 僅三態 vs 傳統五態（iMac/MacBook/iPad 橫豎/iPhone 4/舊 iPhone）
• 設備無關：未來新設備、用戶自定 80px 基礎字號，佈局依然自適應
• 面向人體不變特徵設計：技術變遷快，人類閱讀生理數千年穩定 → 佈局不易過時

從此，設計師們過著幸福的生活……