如何讓你的網站在其出現的任何設備和屏幕尺寸上能夠完美的呈現？響應式設計完美的解決了這一難題，作為現在的網頁設計師都應該瞭解響應式網頁設計的原則。而對於剛步入網頁設計的新手設計師，如果你還不瞭解什麼是響應式設計？如何製作響應式頁面？這篇文章為大家提供了12個基礎的響應式網頁設計的教程，結尾還附上了個人最喜歡的3款響應式網頁設計的工具， 輕鬆帶你入門。
1. What is Responsive Web Design?
https://smallbiztrends.com/2013/05/what-is-respons...
隨著智能手機，平板電腦以及其他移動設備的增長，越來越多人使用小屏幕來查看和閱讀網頁信息。響應式網頁設計完美的滿足了這一點，它使得用戶能夠在各種設備下查看網頁，並且保持良好的網頁可讀性。並且， 在2018年4月Google宣佈了移動優先索引的原則，所以響應式網頁設計已經是一個必須。這篇文章是一篇新手文章，對於還不懂什麼是響應式設計的設計師一個很好的開篇解釋。
2. Responsive Web Design Tutorial and Explanation
如果你對響應式網頁設計的概念完全陌生，又不想看冗長的文章，那麼這個視頻絕對是你的不二之選。本視頻解釋了什麼是響應式網頁設計，結合具體的例子介紹讓你更加了解，當然最重要的是視頻中詳細的介紹如何通過寫代碼去設計一個響應式網頁佈局。
3. Responsive Web Design with HTML&CSS
https://learn.shayhowe.com/advanced-html-css/respo...
本教程解釋了響應式設計和自適應設計的區別，並且詳細介紹如何使用HTML和CSS寫響應式網頁，以及介紹媒體查詢和mobile-first的使用。
4. Responsive Data Table Roundup
https://css-tricks.com/responsive-data-table-round...
數據表是HTML的重要組成部分，雖然它們過去經常被用於佈局，但現在它們主要是用於標記數據。本文具體介紹瞭如何製作響應式數據表，文章包含多個demo可供參考。
5. Bootstrap Responsive Web Design Tutorial For Beginners
https://www.udemy.com/bootstrap-responsive-web-des...
Bootstrap是最受歡迎的HTML，CSS和JS框架之一，用於在Web上開發響應式，移動友好的項目。本教程幫組你如何使用bootstrap框架來開發響應式網頁，你可以從中學到：
使用Twitter bootstrap製作響應式網頁
瞭解bootstrap組件的使用
學習要求：
對Html有基本理解
希望擴展知識的Web Masters和Web開發人員
價格：$11.99
6. How to Make Responsive WordPress Websites (With Themes)
https://business.tutsplus.com/articles/how-to-make...
在構建網站時，使用響應式設計不再只是一種選擇，它是必須。無論你的用戶使用哪種設備進行查看和瀏覽網頁內容，響應式網站設計都能讓你的網站看起來很棒。對於許多企業來說，WordPress是個很好的選擇，鑑於它的靈活性和易於使用。從本教程中，你可以學習到如何使用響應式WordPress模板來創建你的網站以及如何選擇響應式WordPress主題。
7. Responsive Web Design - Introduction
https://www.w3schools.com/css/css_rwd_intro.asp
W3schools是個代碼學習的網站，你可以在這裡找到你想要學習的一切代碼知識。當然這裡提供的響應式網頁設計的教程是非常全面且具體的。你可以學習到：
RWD視口
RWD網格視圖
RWD媒體查詢
RWD圖像
RWD視頻
RWD框架
RWD模板
8. 10 Best Free Responsive HTML5 Web Templates in 2018
https://www.mockplus.com/blog/post/free-responsive...
本文為製作HTML響應式設計的設計師提供了最佳的10個模板，讓你能夠輕鬆應用。
9. The Ultimate Responsive Web Design Tutorials for Beginners
Chris Converse在本教程中分享自己的專業技術，幫助初學者如何建立一個響應式網站。Chris還展示瞭如何使用CSS加載圖像，重新定位導航欄以便在移動設備上更好地查看，以及如何通過提供多個版本的banner圖形和其他圖像來縮短小屏幕的下載時間。另外，你還能瞭解如何使用CSS 媒體查詢替換Retina顯示器的高分辨率版本的圖形。這篇教程可以說是最終極的響應式網頁設計教程。
10. Build An HTML5 Website With A Responsive Layout
這個視頻教程對於新手來說是一個很好的學習響應式網頁設計的教程，教大家如何創建一個實例的HTML5的響應式網頁。視頻還將談論如何使用HTML語義化標籤，諸如，頁面和頁腳。
11. Responsive Web Design Tutorial
https://www.youtube.com/watch?v=3tLb3i7GB38&list=PL4cUxeGkcC9g9Vh9MAA-XKnfJsWZnPZFw
本系列教程涵蓋了12個學習視頻，可以說是一個很完整的響應式網頁設計的教程。從介紹什麼是響應式網頁設計到如何創建響應式網頁，你可以學習到你想要了解響應式網頁的一切知識點。
12. The pro's guide to responsive web design
https://www.creativebloq.com/rwd/pros-guide-respon...
我們都知道響應式設計對於每一個網站都是必須的，但在實踐中，我們也知道了它並不是那麼容易實現的技術。本文集合了許多優秀的網頁設計師的建議，幫助大家如何從基礎知識上升到高層次的響應式網頁設計。
響應式網頁設計的工具
Bootstrap
Bootstrap是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基於HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架，使得 Web 開發更加快捷。它也是最受歡迎的HTML、CSS 和 JS 框架,用於開發響應式佈局、移動設備優先的web項目。
Mockplus
Mockplus是一款在線協作設計工具，允許你創建交互式網頁和原型。這個工具很強大，可以快速的輸出交互網頁，為用戶提供包含通用設計的工具包和組件庫。
Responsinator
這是一個響應式網頁測試的工具，只要輸入網站的URL就能輕鬆的知道你的網站是否友好。並且，你還可以直接與頁面進行交互，點擊頁面鏈接。
總結
響應式佈局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前各種移動設備的普及，用“大勢所趨”來形容也不為過。新手網頁設計師必須掌握這一技術來實現更好的網站用戶體驗，以上12個教程以及3個響應式網頁設計工具希望可以輕鬆帶你入門。
福利小活動
比賽+福利 | 手工畫設計規範圖？設計師更好的選擇
原型工具創造者摹客（Mockplus）團隊發佈的摹客設計系統， 如果，你或者你的團隊還在因為缺乏一致的設計規範而承擔不必要的痛苦，不妨免費體驗一下摹客設計系統管理設計資源，定製設計規範。
摹客特意開放了嚐鮮試用福利，邀你今夏一起High！
*免費試用，還可參與抽獎，Airpods、Wacom手繪板、小米手環等你拿！
*參加設計大賽，曬設計規範，贏iPad Pro！
本次活動時間有限：7月20日起，9月5日止。
查看活動詳情：https://ds.mockplus.cn/summer
快速通道：https://ds.mockplus.cn
閱讀更多 Mockplus摹客 的文章
