第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
不須讀完全部內容，知道怎麼模擬手機與平板螢幕的大小來瀏覽網頁即可。
第1課 作業
請打開美國時代雜誌的網站首頁：
並且回答以下三個問題：
-
在手機、平板、電腦三種裝置上看，你認為網站排版的主要差異是什麼？
-
在手機、平板、電腦三種裝置上看，有些元素只會在特定裝置上顯示，你看得出是什麼嗎？
-
在手機、平板、電腦三種裝置上看，有些元素在不同裝置上的顯示順序是不同的，你看得出是什麼嗎？
能夠回答以上三個問題，你就完成這次的課程目標了！
歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！
可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！
發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！
貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！
未來面試時，分享給面試官看，會讓人知道你的積極程度！
當帶頭，也試著看自己理解多少～
網站上的排版會依照使用者不同的裝置或像素視窗大小，來改變各個元素的排序、
元素是否顯示、每個元素佔據的大小、字體大小、間距、行高。
只有手機視窗底部會有一個fixed定位的廣告，其他2個裝置視窗底部不會顯示廣告。
電腦裝置的most-popular-feed元素右邊會有廣告，其他2個裝置不會有。
電腦header裡的導覽列nav會顯示註冊、登入、訂閱、搜尋元素，其他2個裝置會將
這4個元素移動到漢堡裡面。
平板跟電腦cover裡面會顯示平板的圖片，手機不會顯示。
平板跟電腦newsLetter-containern的四周圍都有邊框border，而手機只有頂部有。
電腦的footer裡面用nav分成4排左到右排列，其他2個裝置是分成2排去排列一樣左
到右，但空間放置不下會移動到上方元素的下面去排列。
手機的secondary會將裡面所有的元素放滿版面的寬度呈現由上到下排列的方式。
手機的you-should-know跟featured-voices、topic-section、mobile-carousel、
image-carousel、videos-well會將裡面所有的元素放滿版面的寬度呈現由左到右排
列的方式，讓使用者以左右滑動方式瀏覽。