響應(yīng)式 Web 設(shè)計(jì)咬腋，是 Web 開(kāi)發(fā)最佳實(shí)踐之一，其目標(biāo)在于適應(yīng)各類設(shè)備不同尺寸的屏幕睡互，比如各類手機(jī)根竿、平板、桌面設(shè)備就珠。
引子
最近一周寇壳，在 前端結(jié)構(gòu) 已確定 JS immy 框架情況下，下一步如何向前推進(jìn)就成了一個(gè)新問(wèn)題妻怎。
基于之前開(kāi)發(fā)過(guò)程中遇到的問(wèn)題壳炎，希望選擇合適的 UI 框架，對(duì)以下問(wèn)題的解決有所幫助：
1. 設(shè)備尺寸適配問(wèn)題逼侦；
2. 兼容性問(wèn)題（IE8+）;
3. 交互動(dòng)畫實(shí)現(xiàn)問(wèn)題匿辩；
借助于框架解決大部分（比如90%）的問(wèn)題，實(shí)在要緊的地方為達(dá)成最佳效果可以輔助以個(gè)別調(diào)整榛丢，包括文案調(diào)整铲球；
為此，開(kāi)發(fā)團(tuán)隊(duì)與設(shè)計(jì)師不斷討論設(shè)計(jì)層面的變革問(wèn)題晰赞，以及在支持當(dāng)前市場(chǎng)推廣條件下如何持續(xù)調(diào)整代碼問(wèn)題稼病；
初步建議
- 原工程支持市場(chǎng)推廣，持續(xù)改進(jìn)掖鱼；
- 新開(kāi)工程然走，支持引入 Bootstrap；
- 以手機(jī)首頁(yè)和 PC 首頁(yè)為典型案例戏挡；
- 模塊共享芍瑞，后端共享，支持多站點(diǎn)發(fā)布增拥；
- 在 1-3 周內(nèi)啄巧，快速躍遷到響應(yīng)式設(shè)計(jì)上來(lái)寻歧；
響應(yīng)式布局（Responsive layouts）
這是 google developers 上關(guān)于 Responsive layouts 的一篇文章，作者 Pete LePage秩仆，最近他走在 Progressive Web App（PWA）方向上（The fundamentals of building PWA码泛，PWA #FullStackCon）；
-
viewport
<meta name="viewport" content="width=device-width, initial-scale=1">澄耍； -
使用相對(duì)寬度值
遵循上下滾動(dòng)慣例噪珊；避免橫向滾動(dòng)的糟糕體驗(yàn)；使用相對(duì)寬度：width: 100%齐莲； -
媒體查詢
優(yōu)先使用 min-width痢站，而非 min-device-width；
使用相對(duì)單位（Use relative units）选酗； -
選擇斷點(diǎn)（breakpoints）
以更好地適應(yīng)小屏幕阵难、大屏幕，以及中間屏幕芒填； -
設(shè)計(jì)模式
大致可歸類為五種：mostly fluid呜叫、column drop、layout shifter殿衰、tiny tweaks 和 off canvas朱庆，是由 Luke Wroblewski 在 2012 年 Multi-Device Layout Patterns 的文章中分類歸納的。
More
- w3schools 示例
- Ethan Marcotte in A List Apart 2010
- Responsive Web Design by Ethan Marcotte闷祥，a book apart.
- Using CSS flexible boxes @ mozilla
- Can I Use：CSS + HTML5 + SVG + JS API 的支持度查詢
- Responsive web design @ wikipedia
- Unobtrusive JavaScript @ wikipedia
- 漸進(jìn)增強(qiáng)（progressive enhancement） @ wikipedia娱颊，優(yōu)于 graceful degradation；
內(nèi)容-》表現(xiàn)-》行為凯砍，由內(nèi)而外箱硕；從適配最小環(huán)境開(kāi)始，漸進(jìn)到最佳環(huán)境果覆，逐漸增強(qiáng)颅痊，以相對(duì)最小代價(jià)殖熟，獲取相對(duì)最好結(jié)果局待； - CSS filter；
