前端這條美人魚，不好抓——讀《響應式Web設計》有感

讀完《響應式Web設計 HTML5和CSS3實戰》第二版，讓自己重新對響應式Web設計產生了濃厚的興趣。最近一段時間沉迷於前端，已然忘卻了原先對各版本瀏覽器進行“樣式相容”的痛。不得不說那確實是一個讓人頭疼的問題。

響應式Web設計是一種利用彈性網格佈局、彈性圖片／媒體、媒體查詢等技術實現的一種Web設計解決方案。使用響應式Web設計，開發者可以讓使用者在不同的終端裝置及視口上訪問到展示優雅的同一張頁面。也許好奇的你會問，使用響應式Web設計，是不是能讓移動端裝置瀏覽網頁的效果與電腦一致？

這是一個值得思考的問題：是要等價的功能還是要等價的外觀？

其實答案很顯然，應該選擇等價的功能。要是在沒有接觸過移動端開發之前，自己應該會覺得等價的外觀是重要的。在接觸了Android和iOS開發之後，突然明白對於一個產品（應用）在不同的場景裡等價的功能才是最重要的。Web設計也是一樣的道理，大同小異。一定要追求“看起來一摸一樣”，這種做法可以說是一種任性的做法。

作為機智的開發者，總有辦法來解決樣式的相容問題。對於陳舊版本的瀏覽器，如：IE6、7、8、9這些老古董，可以根據實際的情況去做適配。如果使用Bootstrap3.X以上的版本倒是可以勉強的支援IE8、9，一些HTML5和CSS3的特性只能配合補丁檔案達到正常效果。我們也可以任性一回，使用autoprefixer幫助解決CSS的相容性問題。舉個例子，目標樣式如下：

div { width: 100px; height: 200px; display: flex;}

轉換後程式碼，如下：

div { width: 100px; height: 200px; display: -webkit-box; display: -ms-flexbox; display: flex; }

這樣是不是很方便？再也不用擔心記不住那些字首，還能提高寫程式碼的效率。

在響應式Web設計的方案中，開發者可以使用媒體查詢針對不同的終端裝置進行樣式的控制。彈性的佈局會要求喜歡使用畫素（px）佈局的開發者轉換為用彈性比例大小布局。這一點移動端開發的童鞋應該會熟悉。其實就是用元素所在容器的大小除以元素的大小，這樣就得到了元素所在容器中佔的比例。使用彈性比例佈局可以解決一些不必要的麻煩。

在新的Web設計浪潮下，開發者可以使用經過幾次改版的“彈性盒子（Flexbox）”佈局來解決日常開發中棘手的問題。圖片的響應式處理，依舊有點像移動端，使用picture元素根據不同的視口，展示合適的圖片。也許有人會疑惑，為什麼不使用width:100%去做控制？很好，這是一個好問題。請你耐心的去思考一下。

HTML5和CSS3給前端開發者帶來了酷炫效果的同時也讓開發者開始了新一輪的Web開發進階之路的學習熱潮。HTML5的新標籤、表單、CSS3的新特性、SVG、動畫、濾鏡、變形、執行緒、離線儲存等知識都是需要時間去鑽研與實踐的。也正是因為Web技術不斷的發展，所以普通使用者才得到了更好的使用者體驗。

關於《響應式Web設計 HTML5和CSS3實戰》這本書，個人的閱讀建議是：在閱讀此書之前最好有一些Web開發的經驗積累，這樣閱讀本書的收益會更大一些。