Web 前端開發－零基礎入門：第三堂

經過前兩堂的課程，學員已經具備利用CSS建立版面的基礎能力，第三堂進一步討論因應行動裝置發展的響應式設計網頁，討論入門相關的數個關鍵議題。

• Viewport
• 流動佈局
• 媒體查詢

其中 Viewport 讓行動裝置自動以適當的尺寸呈現網頁內容，流動佈局透過百分比取代絕對單位確保網頁能在任何裝置完整呈現。媒體查詢則在適當的viewport設定與流動佈局的設計基礎上，進一步透過斷點設定，讓網頁在特定尺寸的螢幕上均能呈現完美佈局與面配置。

Firefox 提供Rwd 初步入門檢視工具「適應性設計檢視模式」，開發人員可以在這個工具進行初步的測試。



完成上述的響應式設計基礎課程，學員能夠透過CSS建構自動適應任何尺寸的裝置螢幕。

我們已經釋出了一系列方便閱讀的RWD技術短文，未能參與課程的朋友也可以透過「RWD 系列文章」建立響應式網頁的設計基礎。