寫在前面 去年上(shàng)半年，我開(kāi)始着手推動項目中響應式設計(jì)的落 地。以官網優化需求為(wèi)契機，主動去做(zuò)了響應式的頁面設計(jì)，也說服了産品、設計(jì)和(hé)開(kāi)發的相關同事一起把它上(shàng)線落實，但(dàn)不幸的是，由于各種方面的原因，比如， 生(shēng)搬硬套的PC模塊，無差異化的設計(jì)使得(de)移動端閱讀不佳，導航兼容性有(yǒu)限等等原因，上(shàng)線幾個(gè)月後又悄然下線。我不禁反思，項目中是否應該推 行(xíng)響應式？今年年初重新啓動了全站(zhàn)響應式項目，從産品、交互、視(shì)覺到開(kāi)發，各個(gè)角色全方面參與了響應式項目，最終門(mén)戶的頁面實現全面響應式。在項目過程中 有(yǒu)技(jì)術(shù)沉澱，也有(yǒu)不少(shǎo)的思考，也就有(yǒu)了以下的文字。文章的內(nèi)容圍繞四個(gè)方面，響應式的概念，實踐方法，一些(xiē)案例，以及一些(xiē)看法。 概念 Ehan Marcotte 為(wèi)A List Apart寫過一篇介紹型的文章 <响应式网页设计> 。文中講到響應式的概念源自響應式建築設計(jì)，即房(fáng)間(jiān)或者空(kōng)間(jiān)會(huì)根據其內(nèi)部人(rén)群數(shù)量和(hé)流動而變化。 [最近一門(mén)新興的學科“響應式建築(responsive architecture)”開(kāi)始在探討(tǎo)物理(lǐ)空(kōng)間(jiān)根據流動于其中的人(rén)進行(xíng)響應的方法。建築師(shī)們通(tōng)過把嵌入式機器(qì)人(rén)與可(kě)拉伸材料結合的方法，嘗試藝術(shù)裝置和(hé) 可(kě)彎曲、伸縮和(hé)擴展的牆體(tǐ)結構，達到根據接近人(rén)群的情況變化的效果。運動傳感器(qì)與氣候控制(zhì)系統相結合，調整圍繞人(rén)們周圍的房(fáng)間(jiān)的溫度以及環境照明(míng)。已經有(yǒu) 公司制(zhì)造了“智能玻璃技(jì)術(shù)”，當室內(nèi)人(rén)數(shù)達到一定的閥值時(shí)，它可(kě)以自動變為(wèi)不透明(míng)狀态，為(wèi)人(rén)們提供更多(duō)隐私保護。] Web響應式設計(jì)的概念與之也非常相似。在如今技(jì)術(shù)飛快發展的時(shí)代，一向是以快論英雄，設備和(hé)分辨率日新月異，就以分類相對明(míng)晰的iPhone為(wèi)例，就有(yǒu)多(duō)達4種的分辨率和(hé)屏幕尺寸，更别提廠商蓬勃發展的安卓機領域。因此，為(wèi)每種設備或者特定設備分辨率制(zhì)定相應的獨立版本是非常費時(shí)費力的事情。 Web響應式設計(jì)的理(lǐ)念，應當是，頁面可(kě)以根據用戶的設備環境，包括系統，分辨率，屏幕尺寸等等因素，進行(xíng)自發式調整，提供更适合當前環境的閱讀和(hé)操作(zuò)體(tǐ)驗，對已有(yǒu)和(hé)未來(lái)即将出現的新設備有(yǒu)一定的适應能力。 實踐 有(yǒu)了概念，一定要談談實現的方法。類似于響應式建築，Web頁面也有(yǒu)對應關鍵因素。 可(kě)彎曲、伸縮、擴展的牆體(tǐ)結構——可(kě)擴展的布局； 運動傳感器(qì)——MediaQuery； 氣候控制(zhì)系統——栅格； 藝術(shù)裝置——css等等。 以上(shàng)給了我寫文章的脈絡結構靈感，于是先從最基礎的布局談起。 可(kě)擴展的布局 有(yǒu)一種流體(tǐ)布局的概念在早起web興起的時(shí)，就開(kāi)始盛行(xíng)了。它的概念是說頁面會(huì)根據浏覽器(qì)窗口的變化進行(xíng)更改，網站(zhàn)可(kě)以通(tōng)過維護一套代碼，保質一緻性的設計(jì)。我這裏強調的可(kě)擴展的布局也是基于這個(gè)概念，隻是現在的方法多(duō)種多(duō)樣，因此要強調頁面布局的可(kě)擴展性。 可(kě)擴展的布局途徑有(yǒu)很(hěn)多(duō)，比如常見的百分比布局，以及一直未成為(wèi)标準的栅格布局等等。 框架 就從這框架來(lái)說，以一個(gè)常見的可(kě)擴展的三欄布局為(wèi)例，就有(yǒu)數(shù)十種方法，這裏抛磚引玉舉幾個(gè)例子。 方法1： Demo1 方法2： Demo2 方法3： Demo3 方法4： Demo4 方法5： Demo5 方法6： Demo6 方法7： Demo7 方法8： Demo8 方法9： Demo9 除了上(shàng)述總結的幾種，還(hái)有(yǒu)更多(duō)更多(duō)的方法。兩欄布局同理(lǐ)就不贅述。 此外W3C也有(yǒu)一個(gè)栅格化布局（Grid Layout）的規範，這個(gè)布局是基于兩維栅格系統設計(jì)的，可(kě)以輕松按照我們的意願改變頁面的設計(jì)。它與Flexbox配合效果更佳。但(dàn)目前仍處于草案階段。翻看了W3C的最新草案內(nèi)容，對Grid Layout的使用方法和(hé)原理(lǐ)簡單介紹下。 1）定義grid： 首先在grid item外的父級容器(qì)上(shàng)定義display: grid. Values： grid – 定義block-level的栅格； inline – 定義 inline-level的栅格 2）一些(xiē)相關概念： grid lines – 是橫向和(hé)縱向劃分grid的線，它可(kě)以一朝數(shù)字順序被指定，也可(kě)以用用戶制(zhì)定的名字被指定。 grid tracks – 指的是一個(gè)grid列或者行(xíng)之前的區(qū)域，換而言之是兩個(gè)相鄰的grid lines之前的空(kōng)間(jiān)。下圖是第二行(xíng)和(hé)第三行(xíng)之間(jiān)的grid tracks。 grid cells – 一個(gè)grid cell指的是grid中最小(xiǎo)的單位。 grid areas – 是用來(lái)展現一個(gè)或多(duō)個(gè)grid item的邏輯空(kōng)間(jiān)。它被四條grid line包圍。 3）grid item 屬性 了解了一些(xiē)基本概念後，就可(kě)以更加絨裏理(lǐ)解相關的grid item屬性。 grid-column-start grid-column-end grid-row-start grid-row-end 這四個(gè)屬性中，grid-column-start和(hé)grid-row-start指明(míng)區(qū)域起始線，grid-column-end和(hé)grid-row-end指明(míng)區(qū)域結束線。這四個(gè)屬性均有(yǒu)以下四個(gè)值可(kě)取。 Values： – 可(kě)以是一個(gè)數(shù)字，代表的是 grid line span – 該項會(huì)橫跨所提供的數(shù)字個(gè)grid tracks span – 該項會(huì)橫跨直到碰到下一個(gè)指定名字的grid line auto – 自動或者默認屬性 舉個(gè)例子： 代表的區(qū)域就是： 除以上(shàng)提到，grid還(hái)擁有(yǒu)更多(duō)的屬性，使之可(kě)以定義grid item的寬高(gāo)，間(jiān)隙，內(nèi)部自适應的方式，對齊方式等等。更多(duō)屬性可(kě)以參考W3C文檔。 4）浏覽器(qì)支持： 令人(rén)遺憾的是，浏覽器(qì)的支持度還(hái)未盡人(rén)意，未來(lái)在UA上(shàng)獲取更多(duō)支持才是Grid發展的根本。 框架搭建好，才僅僅是響應式的開(kāi)始。但(dàn)是俗語有(yǒu)雲：Well begun is half done. 響應式從做(zuò)好的布局開(kāi)始。