RWD 網頁設計入門：第1課 ── 什麼是 RWD 呢？

第1課 課程目標

認識 RWD (Responsive Web Design) 的意思。能利用瀏覽器觀察 RWD 網站的變化。

第1課 課程內容

RWD 全名 Responsive Web Design，是現金智慧型手機普及的年代，最廣泛被採用的設計方法之一。

乍聽之下很酷炫，其實實作起來非常簡單，主要是在不同的螢幕大小上，顯示不同的排版。

電腦的螢幕上以多欄式排版為主，縮小到平板、手機螢幕時，則將各區塊堆疊起來，方便使用者從上到下瀏覽。

請參考這個連結，認識基本的 RWD 原理：

https://www.w3schools.com/html/html_responsive.asp

大致看懂內容即可，不需要全部讀懂沒關係。

如果你在電腦上寫了一個網頁，要如何知道從平板、手機上瀏覽，網頁看起來是什麼樣子呢？

有兩種方法。

第一種，用滑鼠拖拉瀏覽器，把視窗慢慢縮小，你應該會看到網頁畫面有慢慢變化。

第二種，使用瀏覽器的開發者功能，直接幫你把螢幕調整成平板與手機的大小。

請參考以下連結：

https://developers.google.com/web/tools/chrome-devtools/device-mode/?hl=zh-tw

https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports?hl=zh-tw

不須讀完全部內容，知道怎麼模擬手機與平板螢幕的大小來瀏覽網頁即可。

第1課 作業

請打開美國時代雜誌的網站首頁：

http://time.com

並且回答以下三個問題：

1. 在手機、平板、電腦三種裝置上看，你認為網站排版的主要差異是什麼？

2. 在手機、平板、電腦三種裝置上看，有些元素只會在特定裝置上顯示，你看得出是什麼嗎？

3. 在手機、平板、電腦三種裝置上看，有些元素在不同裝置上的顯示順序是不同的，你看得出是什麼嗎？

能夠回答以上三個問題，你就完成這次的課程目標了！