• 課程時長

    3 小時 31 分

  • 課程級別

    中階

  • 授課語言

    中文

這堂課你將會學到

  • RWD 基礎概念與原理
  • RWD 設計過程當中的思維邏輯
  • 獨立完成完整的手機版網頁
  • 實作特殊手機網頁的排版
  • mobile first 逆向思考的設計思維

章節目錄

  • 1

    第 1 章 RWD 基礎概念與常見的設計模式

    • 單元 1 - 檔案下載

    • 單元 2 - 常用&特殊設計模式 fluid、column drop、off canvas、tiny tweaks、layout shifter

    • 單元 3 - 逆向思考下的設計（ break point & navigation & Tab bar)

    • 單元 4 - media query 媒體查詢 ＆ viewport 屬性使用

    • 單元 5 - 固定及浮動 static / relative

    • 單元 6 - CSS權重 (Specificity) 概念與應用
  • 2

    第 2 章 RWD 實戰

    • 單元 1 - 檔案下載

    • 單元 2 - fluid、column drop 設定 > 模擬、偵錯工具 inspect element

    • 單元 3 - sidebar drop、border box 內容不會被擠壓 > media queries 的用法

    • 單元 4 - scale+column drop 實務上的做法

    • 單元 5 - off canvas 架構及範例 、做出 hamburger menu ！

    • 單元 6 - 實作特殊網頁的排版＆群組化概念 tiny tweaks

    • 單元 7 - 逆向思考反而容易做 ！Mobile first