《響應式Web設計——html5和css3實戰》讀書筆記

這本書的定位不是API手冊，而是實戰技巧，給我的感覺很像《無懈可擊的web設計》的定位，同時也很像《DOM javascript程式設計藝術》的風格，用一個實際案例貫穿全書。雖然書名的主標題是“響應式Web設計”，但全書並非只講響應式設計。它的主線是響應式設計，但穿插其中的，還有大量的html5標籤和css3知識，沒有js方面的知識。所以作者的身份更像是國內的css重構工程師。

　　　　　　　　　

摘一些印象深刻的點，結合我自己的思路分析一下吧：

1）響應式設計有兩個基礎條件，第一是設定viewport為device-width，第二是媒體查詢。這是響應式佈局的根基，就像css sprite的真相就是background-position一樣，瞭解到這一點，響應式佈局就成功了一半了。

媒體查詢可以用來判斷當前裝置的視窗寬高、橫豎屏等，相當於用css對當前裝置寫if、else。具體媒體查詢的用法介紹可以看這裡，很詳細：http://dev.oupeng.com/articles/css3-conditional-intro

值得注意的是 @import url("xxx.css") screen and (min-width:xxx px) 這種寫法。因為如果將不同解析度下的樣式單獨寫在一個檔案裡，使用動態載入的時，如果一個檔案對應一個link標籤，就需要加很多模組了。而如果將這些零散的模組都通過在主css檔案中import進來，就只需要動態載入一個模組了，dirty的事情最好別暴露出來。

2）響應式佈局需要找幾個主流解析度作為臨界點，針對主流解析度做出幾個不同的版本。

這幾個主流解析度來自於你需要支援的終端：桌上型電腦、筆記本、iphone、ipad、android phone、android pad、winphone、黑莓等等等等。先確定你要支援哪些終端，再去搜集相關的資料，看看這些終端的解析度和市場份額，最終確定出一份支援列表。這份支援列表應該是需要一直維護的，也許不用那麼頻繁，但應該不會有停下來的時候——移動終端的碎片化問題，你懂的，光一個android就夠你受得了，更何況這麼多裝置。這個成本比定寬佈局高出很多。

確定出這份支援列表後，需要將這些資料拿給設計師去設計幾份不同的排版。這個過程中一定需要前端工程師和設計師進行較頻繁的溝通，評估設計的可能性和價效比。這個成本比傳統的定寬佈局大很多。

設計圖出來之後，前端需要將css佈局分成兩層，底層是各個解析度通用的部分，其上需要寫多個分支，分別對應不同的解析度。開發和維護成本翻倍。

終上所述，響應式佈局從設計到開發，各個環節的成本都比定寬佈局高出很多。產品的開發時間會比原來開發定寬網站長很多，設計師和工程師的工作量都會大很多。這事，在實際操作中，估計只能在公司內從上至下推了，我猜大部分工程師不會希望給自己找這樣的苦差事，就算工程師熱衷於響應式佈局這個新玩意兒，設計師們不見得喜歡。而這，並不是工程師一個人就能玩的。

3）流體佈局。

流體佈局最早是在《無》裡介紹過，但因為並沒有很強的市場需求，所以流體佈局的概念只在前端圈子裡受追捧過很短的一段時間，如果不是移動網際網路的到來，流體佈局已經幾乎被遺忘了。而流體佈局是響應式佈局的必要組成部分，所以這次它又復活了。

流體佈局其實也分兩種，一種是固定一側，讓另一側自適應，這個前些年流行的負邊距佈局很容易就能實現;另一種是兩側都自適應，按比例同時放大和縮小，這個就比較麻煩了。《響》這本書介紹的就是後者，具體來說它通過使用百分比這個單位來讓所有元素的寬高都能自適應，包括字型大小，而不是簡單地讓長文字折行。

我個人其實並不太認同《響》的推薦，特別是看到所有單位都要經過一個除法之後才能得到最終結果值，而這結果值還是類似“margin-right:2.6595745%;”這麼BT的數值，想想就頭大。以後佈局時，要時候把計算器開啟。。。反正我是受不了。

我來做響應式佈局，就會採用負邊距佈局的思路，固定一邊的寬度，自適應另一邊，然後所有的單位還是用px，不同的主流解析度分支下，可能設定不同的尺寸，但一定是用px做單位的。但到了css3時代，其實已經沒有必須使用複雜的負邊距佈局來實現“自適應”了，css3的盒佈局可以很簡單地實現自適應的功能。

4）網路字型。

@font-face我一早就聽說了，但@font-face遇到中文就哭了 T_T ，英文字型的話，字元翻來覆去就那麼幾個abcd和常用符號，但中文不同，中文的文字不是靠字母拼起來的，所以中文字型檔案會特別大。所以之前看到網路字型這兒的時候，我總覺得這玩意兒遇到中國國情就直接忽略吧。

《響》介紹了@font-face的另一個用法，讓我眼前一亮，這才覺得在中文環境下@font-face依然是個寶藏 —— 可以用網路字型來讓字母看起來像個圖示！icon小圖示可以不再使用圖片了，而且更妙的是，因為它事實上只是個字型，所以可以輕鬆地通過font-size改變它的大小，它是向量的！不說廢話了，看看這個網站就知道我在說什麼了：http://fico.lensco.be/

另外，需要注意的是，使用@font-face時有可能字型會顯得模糊，可以通過設定font-weight來解決。

5）使用線性漸變和徑向漸變來生成背景圖案。

單獨使用線性漸變或單獨使用徑向漸變來做背景，沒什麼值得說的。但如果結合這兩者，使用repeating-radial-gradient 可以生成非常漂亮的複雜背景！這些背景甚至可以代替一些平鋪用的圖片。讓人意外的創意：http://lea.verou.me/css3patterns/

6）表單2.0的驗證。

《響》的作者很高興html5的表單2.0可以不通過js就完成表單的驗證工作。但這點我持懷疑態度。第一，表單不一定是通過submit方式提交的，有可能是通過ajax或者websocket提交;第二，驗證失敗後的提示，無法自己定製，瀏覽器提供的是啥樣就是啥樣，類似於title屬性的UI展現無法定製;第三，表單的驗證似乎不是那麼精準，去年我就做過相關的demo：http://hi.baidu.com/cly84920/item/ea0a0f7c343e29336e29f685

7）響應式佈局案例網站 —— css工程師和設計師的靈感源泉。

網站重構剛興起時，為了展示css佈局的可能性，有個叫禪意花園的網站http://www.csszengarden.com/，收集了各種css作品，向外界展示css的威力。它是面向css工程師的。響應式佈局也有個類似的網站http://mediaqueri.es/ ，它收集了一系列的響應式佈局案例。響應式設計是個新概念，不同於css佈局只是工程師們的技術革命，它同時影響著前端工程師和設計師。設計師們也需要靈感，什麼地方可以怎麼處理以讓同一套圖，用最小的成本適配於各種解析度，同時保持主次分明，內容優先。

這個網站可以方便工程師和設計師們尋找靈感。在這個大家都在探索的階段，有這麼一個網站是特別重要的。

8）響應式佈局不一定是答案。

就像作者在書中提到的，對於響應式佈局有很多人持懷疑態度。包括我本人，對響應式佈局也持懷疑態度，因為它的溝通和開發維護成本真的不低。響應式佈局不一定是答案，至少不是唯一的答案。比如我做的這個專案，http://hi.baidu.com/cly84920/item/b29a8d4ec0fdc7f0dc0f6cd1 ，就沒有使用響應式佈局，而且我認為對於這個專案不使用響應式佈局利大於弊。就像作者說的，用不用html5，用不用響應式設計，要“看情況”。

無論用不用吧，瞭解這種方法總是必要的，手上多一個武器，就多一種選擇。

看完之後，給我的感覺就像當年看完《無》一樣，感覺技術又要更新換代了。當年css2佈局代替了table佈局，在業界引起了一輪學習熱潮和朝代更替。不願跟進的同學，在幾年後被淘汰了。現在css3和移動網際網路，又帶來了新的變化，很多東西和以前不一樣了，不願跟進的同學，在不久的將來會像當年堅持使用table佈局的同學一樣，被時代淘汰掉。歷史總是驚人的相似，而且時代的變革不以人的意志為轉移，要麼跟進，要麼淘汰，上了IT這條賊船的童鞋們，別掙扎了，學吧。唉。。。

本文轉自阿當個人空間