之前也接觸過響應式開發，大概就是下載一個響應式網站模板，然後替換圖片，哈哈！

確實沒有系統的學習和了解過響應式開發。最近工作還蠻清閒，找出壓箱底很久的響應式開發教程，大概一月前看過一些，然後也忘得差不多la，從頭開始學習唄!

這套課程還是很基礎的，但越是基礎的東西，越不願意花心思靜下心來學習。看完這套響應式開發教程，不僅能夠構建響應式開發前端技術樹，還幫助自己整理了部分HTML和CSS基礎知識，很重要但總記不清楚的知識點。

首先了解一下響應式設計的概念。

什麼是響應式網站？

響應式網站（Responsive Web Design）是一個設計理念，在響應式網站的設計與開發中應當根據使用者行為以及裝置環境（系統平臺、螢幕尺寸、螢幕定向等）進行相應的響應和調整。

無論使用者正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關指令碼功能等，以適應不同裝置；換句話說，頁面應該有能力去自動響應使用者的裝置環境，只設計一個網站就能夠相容多個終端。

 響應式網站設計的理念是在2010由 Ethan Marcotte 著作的 一文中提出，它是多項技術的綜合體，主要包括：

1. flexible grid layout 彈性網格佈局（別稱：流式佈局、自適應佈局）：不對瀏覽器寬度做任何假設，若解析度較低或較高，表現會很糟糕，優化程度有限
2. flexiable image 彈性圖片：針對圖片的響應式優化
3. media queries 媒體查詢：針對不同解析度編寫不同樣式

響應式網站優缺點

優點：

1. 減少工作量，網站、設計、程式碼、內容都只需要一份，多出來的工作量只是JS指令碼和CSS樣式的部分改動。

2. 節省時間。
3. 每個裝置都能得到正確的設計。
4. 幫助搜尋優化。

缺點：

1. 需要載入更多的樣式和指令碼資源。
2. 設計比較難以精確定位和控制。
3. 老版本瀏覽器相容性不好。

響應式網站設計實踐原則？

瞭解過響應式網站設計概念，在開始真實專案實踐前，需要明確響應式網站設計的幾個實踐原則。避免我們因為基礎不牢靠，導致錯誤的選型。

漸進增強和優雅降級這兩個概念是在 CSS3 出現之後火起來的。由於低階瀏覽器不支援 CSS3，但是 CSS3 特效太優秀不忍放棄，所以在高階瀏覽器中使用CSS3，而在低階瀏覽器只保證最基本的功能。二者的目的都是關注不同瀏覽器下的不同體驗，但是它們側重點不同，所以導致了工作流程上的不同。

漸進增強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然後再針對高階瀏覽器進行效果、互動、追加功能達到更好的體驗。

優雅降級（Graceful Degradation）：一開始就構建站點的完整功能，然後針對瀏覽器測試和修復。比如一開始使用 CSS3 的特性構建了一個應用，然後逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。

在相應式網站開發中題主是推薦優雅降級的原則，畢竟@media屬性是css3中的新特新。

原則二：先針對大螢幕設計 VS 先針對小螢幕設計

與習慣和網站性質有關，沒有對錯，只有適合。對於支付理財類的專案，使用者通常會選擇在電腦上操作（有各種安全證書保障），這時可以先針對大螢幕設計。對於娛樂休閒類的專案，使用者習慣在手機端操作，這就可以優先考慮小螢幕的設計。

原則三：如何選擇瀏覽器進行開發階段的除錯

確定支援的瀏覽器，可根據各瀏覽器市場佔比和公司實際業務情況，選擇需要相容的瀏覽器。若沒有特殊情況，推薦在最新版本的chrome瀏覽器中進行開發，從chrome瀏覽器移植到其他瀏覽器時相容性還是不錯的。

建議不要針對特定裝置分割，而是針對螢幕尺寸進行分割。例如，

當然這個斷點值的選取要根據設計稿進行調整。

原則五：如何取捨大小螢幕上的展現內容

不管裝置大小，應該包含相同的內容 VS 根據裝置大小不同，顯示相同的內容。這就取決於產品經理啦。

響應式網站開發技術點詳解

幫你徹底弄懂css中單位px、rem、em的區別，以及在響應式開發中不同單位最優的適用場景。

針對不同螢幕大小，編寫不同的頁面樣式，改用合適螢幕大小的排版和佈局。

響應式圖片不僅僅指圖片的排版和佈局，還包括根據裝置大小載入不同的圖片。在移動端裝置上訪問時，載入與使用者裝置相匹配的小圖片，即快速，又不影響使用者體驗，也不會因為載入跟移動端不適配的高清大圖導致使用者流量出走。點選標題連結，將會介紹五種實現響應式圖片的方法。

其他，前端開發基礎知識點彙總

在學習這套響應式開發教程的過程中，還涉及很多HTML和CSS相關的基礎知識，整理如下：

附錄 

需要視訊課程的同學可以聯絡微信【H19950211H】免費提供。

與君共勉：再牛逼的夢想，也抵不住傻逼般的堅持！