柵格系統(tǒng)是響應(yīng)式中很重要的一環(huán)，是整個(gè)響應(yīng)式設(shè)計(jì)的基礎(chǔ)。柵格的運(yùn)用在于統(tǒng)一設(shè)計(jì)與前端開發(fā)的規(guī)范性，使網(wǎng)頁的響應(yīng)式布局有理可據(jù)，更加的靈活合理。通常我們說起響應(yīng)式設(shè)計(jì)都是針對網(wǎng)頁設(shè)計(jì)的，主要是因?yàn)橥粋€(gè)網(wǎng)頁，有可能是在一個(gè)4寸的Android手機(jī)上瀏覽，也有可能是在一個(gè)27寸的iMac上瀏覽，網(wǎng)頁的設(shè)計(jì)者必須滿足在不同尺寸設(shè)備上的瀏覽需求和良好的體驗(yàn)，從而催生出這種適應(yīng)屏幕分辨率的設(shè)計(jì)方法。來看看下面兩種頁面，毫無疑問的大家會(huì)更喜歡后者。
請不要誤會(huì)，這并不是指單獨(dú)適配的移動(dòng)版網(wǎng)頁，而是同一個(gè)頁面，隨著屏幕尺寸的改變，自適應(yīng)地改變頁面布局。下圖就是一個(gè)栗子，隨著屏幕的變寬，網(wǎng)頁中的模塊也隨之調(diào)整了位置，這才是「響應(yīng)式」。
響應(yīng)式設(shè)計(jì)有些什么優(yōu)點(diǎn)呢？
不必單獨(dú)維護(hù)移動(dòng)和PC兩套站點(diǎn)，降低人力成本
可以復(fù)用設(shè)計(jì)元素，內(nèi)容資源
同一網(wǎng)址自適應(yīng)不同設(shè)備，利于不同設(shè)備的用戶相互分享網(wǎng)址
SEO優(yōu)化，搜索引擎更愿意收錄同時(shí)適配移動(dòng)設(shè)備和PC設(shè)備的網(wǎng)頁
看上去是不是有點(diǎn)心動(dòng)了，想將自家的網(wǎng)站改造成響應(yīng)式設(shè)計(jì)的，那么需要做些什么呢？
首先，你需要一名設(shè)計(jì)獅。需要將網(wǎng)頁中的元素分模塊設(shè)計(jì)，針對不同的屏幕，調(diào)整出不同的布局。現(xiàn)在流行一種「移動(dòng)優(yōu)先」的策略，也就是說先行設(shè)計(jì)移動(dòng)端的樣式，然后再擴(kuò)展成為PC端樣式，因?yàn)橐苿?dòng)端的樣式相對簡單，漸進(jìn)增強(qiáng)為PC端樣式，更為平滑。
然后，你還需要一名前端攻城獅。響應(yīng)式設(shè)計(jì)的落地，主要是由前端攻城獅來完成，他要將設(shè)計(jì)獅設(shè)計(jì)的不同布局，寫成CSS文件，適配到不同的分辨率下。同時(shí)，他還要使用資源查詢（Media Queries）根據(jù) 不同的分辨率，拉取不同尺寸的資源，以加快頁面的加載速度，并且減少流量的消耗。就像下面這張圖，在不同的設(shè)備上，應(yīng)該裁剪不同的尺寸。
最好的情況，你還有一名后臺攻城獅。前面我們看到，前端攻城獅會(huì)寫適配不同屏幕的CSS代碼，一次頁面加載，會(huì)將所有屏幕尺寸的CSS代碼都加載一遍，這里難免有些冗余。如果你有一個(gè)強(qiáng)有力的后臺，那就可以做到只對某些設(shè)備下方特定的CSS代碼，在這種優(yōu)化情況下，避免了不必要的資源浪費(fèi)。
【延伸閱讀】：
雖然響應(yīng)式設(shè)計(jì)的優(yōu)勢和趨勢已被普遍認(rèn)可，但目前響應(yīng)式設(shè)計(jì)的模式的普及還是有很多難題需要突破：
1、響應(yīng)式圖片：目前彈性圖片的做法主要是：縮放、剪裁、分條件加載等實(shí)現(xiàn)方法本質(zhì)上都只是一個(gè)技巧，只是治標(biāo)不治本地掩蓋了問題，并未真正完美地實(shí)現(xiàn)圖片的彈性。
2、跨端的交互：在響應(yīng)式設(shè)計(jì)中，我們不僅要需要考慮桌面用戶的使用習(xí)慣，還必須兼顧不同尺寸的手持設(shè)備。比如在桌面端無盡優(yōu)雅的Hover，在移動(dòng)端卻是無比糟糕的體驗(yàn)，如何“求同存異”，讓各端體驗(yàn)均能最佳，還是需要繼續(xù)深入探究的。
3、性能：性能估計(jì)是在響應(yīng)式開發(fā)中最大的痛，按條件加載、隱藏或顯示什么內(nèi)容，都會(huì)比單一條件判斷的代碼結(jié)構(gòu)來的繁瑣，并影響體驗(yàn)及維護(hù)。尤其是移動(dòng)性能上，更多樣的設(shè)備具有更加復(fù)雜的使用環(huán)境，如何識別設(shè)備，并讓設(shè)備在不同環(huán)境均能良好體驗(yàn)，也是一根硬骨頭。
4、合作流程：響應(yīng)式設(shè)計(jì)遠(yuǎn)遠(yuǎn)不止是一種簡單的設(shè)計(jì)策略，它為Web項(xiàng)目帶來的是一整套全新的、完整的方法，還應(yīng)該包括一種新的、可以更好地利用這一模式的工作流程。
用作品證明實(shí)力，網(wǎng)站建設(shè)行業(yè)排名前列
