Responsive Web Design
  • Responsive Web Design 課程
  • 1 簡介
    • 1.1 講者簡介
    • 1.2 課程簡介
  • 2 版面概念解析
  • 3 Media Query
    • 3.1 媒體類型 Media Type
    • 3.2 媒體描述 Media Features
    • 3.3 練習
  • 4 Viewport
    • 4.1 Viewport 定義
    • 4.2 HTML Viewport Meta
  • 5 Bootstrap Grid System
    • 5.1 載入 Grid 相關 CSS
    • 5.2 Grid System
    • 5.3 breakpoint 練習
  • 6 Transition 轉場效果
    • 6.1 第一個 transition
    • 6.2 transition-property
    • 6.3 transition-duration
    • 6.4 transition-timing-function
    • 6.5 transition-delay
    • 6.6 transition 簡寫
    • 6.7 練習
  • 7 Grid 排版模式
    • 7.1 基本觀念及術語
    • 7.2 Grid Container
    • 7.3 Grid Items
    • 7.4 練習
  • 8 Animation 動畫效果
    • 8.1 第一個 animation
    • 8.2 關於 keyframes
    • 8.3 相同元素套用多個 animation
    • 8.4 animation-iteration-count
    • 8.5 animation-direction
    • 8.6 animation-delay
    • 8.7 animation-fill-mode
    • 8.8 animation-play-state
    • 8.9 animation-timing-function
    • 8.10 animation 簡寫
    • 8.11 練習
  • 9 練習
  • 10 RWD 作業
  • 11 手機連本機端網站
  • 12 參考資料
  • 13 補充：AOS
Powered by GitBook
On this page
  • 什麼是 Responsive Web Design？
  • 誰該學習這門課程？
  • Code Pen 註冊
  • 編輯器
  • 瀏覽器
  • 前置
  1. 1 簡介

1.2 課程簡介

Previous1.1 講者簡介Next2 版面概念解析

Last updated 1 year ago

什麼是 Responsive Web Design？

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

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

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

誰該學習這門課程？

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

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

Code Pen 註冊

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

編輯器

瀏覽器

  • Safari

前置

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

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

https://codepen.io/
VS Code
Chrome
Firefox
Edge