尤川豪   ·  7月前
Exp. 1,778  ·  231 貼文  ·  164 留言

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. 在手機、平板、電腦三種裝置上看,有些元素在不同裝置上的顯示順序是不同的,你看得出是什麼嗎?

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

  分享   共 965 次點閱
共有 0 則留言
您的留言