本文關(guān)鍵詞：響應(yīng)式Web設(shè)計(jì)實(shí)踐，由筆耕文化傳播整理發(fā)布。

《響應(yīng)式Web設(shè)計(jì)實(shí)踐》：前端+后臺(tái)=響應(yīng)式

2013-04-12 1042 閱讀

《響應(yīng)式Web設(shè)計(jì)實(shí)踐》是一本關(guān)于響應(yīng)式Web設(shè)計(jì)的書(shū)，雖然之前也有構(gòu)建響應(yīng)式站點(diǎn)的經(jīng)驗(yàn)（比如）仔細(xì)讀完全書(shū)，才知道響應(yīng)式不只是media query這么簡(jiǎn)單。

本書(shū)內(nèi)容非常豐富，下面介紹一些對(duì)我有所幫助的章節(jié)：

我之前的制作經(jīng)驗(yàn)是“優(yōu)雅降級(jí)”型的，先制作一個(gè)完整的站點(diǎn)，在Chrome、IE中都能完整查看了，然后再往下增加一些斷點(diǎn)，比如640px、320px等，在這些斷點(diǎn)中新增樣式來(lái)覆蓋之前的完整樣式，或者隱藏一些元素，但這樣的缺點(diǎn)是不支持媒體查詢的手機(jī)瀏覽器就只能讀取完整站點(diǎn)樣式了。而且因?yàn)樽隽藃estyle，整體代碼量會(huì)偏大。

所以本書(shū)的經(jīng)驗(yàn)“漸進(jìn)增強(qiáng)”，先制作一個(gè)核心站點(diǎn)樣式，這個(gè)樣式中沒(méi)有負(fù)責(zé)布局的樣式，，沒(méi)有左右欄，就是簡(jiǎn)單的核心樣式。然后在媒體查詢中往上增加一些斷點(diǎn)，比如320px、640px等，在這些斷點(diǎn)中新增樣式來(lái)增加布局樣式，這樣就免掉了之前的缺點(diǎn)。

最后桌面端的IE678不認(rèn)識(shí)media query，所以需要用IE條件注釋加載一個(gè)單獨(dú)的樣式：

  本文關(guān)鍵詞：響應(yīng)式Web設(shè)計(jì)實(shí)踐，由筆耕文化傳播整理發(fā)布。