本課程探索回應式設計的各個層面。瞭解如何打造適合所有人瀏覽的網站。
本課程將帶您瞭解現代回應式網頁設計的多種面向。 前幾個單元將帶您瞭解回應式設計的發展歷程,以及回應式版面配置的基本概念。方便您瞭解回應式圖片、字體排版、無障礙功能和其他設定。
在課程中,您將學會如何根據使用者的偏好和裝置功能調整網站。 最後,您也會瞭解回應式設計的未來可能有哪些考量。
每個單元都有示範和自我評量,可讓你測驗自己學到的知識。
本課程適合初級、中級設計人員和開發人員,應對於 HTML 和 CSS 有基本的瞭解。您不需要瞭解任何 JavaScript。如果您是第一次建立網站,也可以參考 HTML 簡介和其他課程,協助您瞭解 CSS。
以下是課程內容:
說明
瞭解回應式設計的從何而來。
媒體查詢
使用 CSS 媒體查詢,根據不同的螢幕大小調整設計。
國際化
準備不同語言和書寫模式的設計。
微距版面配置
使用各種 CSS 技巧設計網頁版面配置。
微型版面配置
建構可存放於任何位置的彈性元件。
Typography
確保文字在任何裝置上清晰易讀、精美精美。
回應式圖片
提供訪客裝置和螢幕上最合適的圖片。
圖片元素
讓你對圖片更有創意。
圖示
使用可擴充向量圖形處理可擴充的回應式圖像。
主題設定
根據使用者偏好 (例如深色模式) 調整設計。
無障礙功能
確認您的網站可供所有人瀏覽。
互動技術
讓網頁準備好採用各種輸入機制 (滑鼠、鍵盤和觸控)。
使用者介面模式
請考慮配合不同螢幕大小調整的常見 UI 元素。
媒體功能
重點摘要,說明媒體功能讓你根據裝置和偏好做出哪些回應。
螢幕設定
針對具有多個螢幕的裝置製作內容。
結語與後續步驟
可協助你進行後續步驟的更多資源。
準備好學習回應式設計了嗎?