響應式網頁設計（Responsive Web Design，簡稱 RWD）是一種現代化的網頁設計方法
➡️旨在讓網站能夠自動適應不同設備和螢幕尺寸，提供最佳的使用者體驗。
➡️桌面電腦、筆記型電腦、平板電腦還是智能手機，響應式網頁都能根據設備的特性進行調整，確保內容的可讀性和功能的易用性。

響應式網頁設計的核心原則

1. 流式佈局（Fluid Grid）：
   /使用相對單位（如百分比）來定義元素的寬度，而非固定的像素值。這樣，網頁的佈局可以根據螢幕的大小自動調整。
2. 彈性圖像和媒體（Flexible Images and Media）：
   /圖片和其他媒體內容會根據其所在容器的大小自動縮放，避免在小螢幕上出現超出範圍或變形的情況。
3. 媒體查詢（Media Queries）：
   /利用 CSS3 的媒體查詢功能，根據不同的設備特性（如螢幕寬度、高度、解析度等）應用不同的樣式規則，實現針對性的設計調整。

響應式網頁設計的優點
1. 提升使用者體驗：
/不論使用者使用何種設備訪問網站，都能獲得一致且優化的瀏覽體驗，增加網站的可用性和滿意度。
2. SEO友好：
/搜尋引擎（如Google）偏好響應式設計，因為它避免了內容重複，並且能夠更好地索引網站內容，從而提升網站在搜尋結果中的排名。
3. 維護方便：
/一個響應式網站只需維護一套代碼，減少了多個版本（如桌面版和移動版）的維護成本，提升了開發效率。

常用的響應式設計框架

1. Bootstrap：
   • 由Twitter開發的前端框架，提供了豐富的響應式佈局和組件，簡化了響應式網站的開發過程。
2. Foundation：
   • 另一個功能強大的前端框架，具有靈活的網格系統和多樣的UI組件，適合構建高度自定義的響應式網站。
3. Tailwind CSS：
   • 一種實用優先的CSS框架，通過預定義的類名實現響應式設計，提供了高度的靈活性和可定制性。