1.2 課程簡介

什麼是 Responsive Web Design？

又稱做 RWD，中譯：響應式設計。 不論任何裝置：桌上型電腦、平板、手機都有著不同的螢幕大小。為了解決在同一份網頁面對這些設備，有不同的版面情況及使用情境，因此有了 RWD 。一切都是為了提供使用者有更好的使用體驗(User Experience)：易讀性、操控性。

技術思維：在一個 HTML 頁面，針對不同的螢幕寬度，撰寫不同的 CSS，使得網頁在面對不同的螢幕寬度時，都能正常呈現且維持良好的使用體驗。

註：針對不同的螢幕寬度，撰寫不同的 CSS → 需要靠媒體查詢(Media Query)。

誰該學習這門課程？

• 對網站前端工程領域有興趣。

• 已經學習過基礎的 HTML、CSS，想進一步瞭解 RWD 主題。

Code Pen 註冊

作業繳交直接貼 CodePen 的網址，所以請同學先註冊：

https://codepen.io/

編輯器

• VS Code

瀏覽器

• Chrome

• Firefox

• Safari

• Edge

前置

請在電腦桌面或自己偏好的位置，建立 rwd 資料夾，然後裡面建立 practice 及 assignment_rwd 兩個資料夾。

請用 VS Code 編輯器開啟 rwd 資料夾，及使用 live server。