什麼是RWD

「可以根據裝置畫面尺寸大小來提供最佳的視覺體驗的網站設計」

響應式網頁設計（Responsive Web Design）簡稱RWD，有多種稱呼方式：適應性網頁、自適應網頁設計、回應式網頁設計、多螢幕網頁設計等等，不管怎麼稱呼，指的都是RWD。

該名詞在２０１０年由一個網站設計師Ethan Marcotte第一次在A List Apart文章中提到；而在2012年後被公認為是日後網頁設計開發技術的趨勢，並流行起來。

其主要的精神在於開發網站時，使用CSS3，以百分比的方式來彈性的設計畫面，在不同解析度的畫面下改變網頁頁面的佈局及排版，讓不同大小螢幕的裝置都可以正常瀏覽同一網站，提供最佳的閱讀體驗，是因應這幾年因為智慧裝置發展快速而大量增加想出來的一個網站設計方法。

補充： RWD在維基百科的介紹

課程介紹

開發工具

Visual Studio Code：下載

一個「開放原始碼」＋「跨平台」＋「免費」的編輯器；號稱微軟良心之作的Visual Studio Code在2015年被微軟發佈。

• 語法高亮顯示
• 智慧程式碼補全
• 自定義熱鍵
• 括號匹配、自動縮排
• 程式碼比對
• 插件擴充功能

在跨平台上支援了Windows、Mac以及Linux加強練習系統，輕薄短小，有執行快速等等優點；它只是一個程式碼編輯器（Editor），而不是一個IDE（整合式開發環境），類似的軟體還有像：Sublime Text、Atom等等。

Google Chrome瀏覽器

Filezilla FTP檔案上傳軟體

RWD開發技術

• 網頁開發基本功：HTML、CSS、JavaScript
• JavaScript框架：React.js
• CSS框架：Bootstrap

• 課程開頭會從頭到尾自行輸入程式碼來練習，而不會使用如Dreamwever拖拉的方式來建造網頁。
• 課程中段會以學習到的基本功加上框架以及網路上免費資源來達到快速開發網站的目的。
• 學習基礎並不是鼓勵從頭開發，而是為了以後可以更容易的了解並解決問題。

雲端主機的建立與操作

• 透過申請全世界最大的雲端主機供應商Amazon的AWS EC2（免費使用一年），來建立、安裝並設定自己的網站主機。
• 申請使用終身免費的雲端網頁空間000webhost

網站技術簡介

網站技術通常分為前端以及後端，各有不同的技術與框架，前端通常是指顯示給使用者看的介面以及操作的元件，如：跑馬燈、照片、下拉選單、文字框、對話盒等等，而後端是指在伺服器上執行的程式碼，用來根據使用的需求產生要回應給前端介面的內容、邏輯運算，將資料存入資料庫等等，而本課程只會著重在前端技術上。

一個前端網頁通常是由三個技術組成：

• HTML
• CSS
• Javascript

HTML用來設定要顯示在網頁上的內容，CSS用來呈現整個畫面的外觀，而Javascript讓網頁可以有互動的效果。

前端技術（網頁端）

前端技術關係圖

後端技術（伺服器端）

一段歷史

固定尺寸

在2000年左右，螢幕大多是1024像素，大部分的網頁設計師都會將網頁固定為800像素為設計，好處就是在擺放版面元素時可以較為精準，設計師可以更容易的設計網頁畫面，而在更寬的螢幕上，只要在兩邊補上一些額外的空間，這樣網頁的版型就不致於跑掉；這是當時非常流行的一種設計方式，直到現在，都還有為數不少的網站仍繼續這樣的設計。

例如：

• Yahoo
• PCHome
• Facebook
• 巴哈姆特

依百分比建立

後來，電腦螢幕漸漸變大，兩邊的留白也越來越大，因此開始了一種流動式（Fluid Design）版面的設計方式，也就是以百分比來定義元素的大小，這樣，不管畫面有多寬，都可佔滿整個空間而不會浪費。

但這樣一來，卻有可能在較寬的螢幕上，出現過寬或是過長的線條，欄位的劃分上也變得怪異，為了配合不同寬度的螢幕，設計師必須花費更多精神來設計版面，因此，固定式版面仍然持續流行。

例如：

• 某某論壇
• Yahoo新聞

行動裝置快速崛起的現在

近幾年，因為行動裝置的快速成長，智慧型手機、平板等等，螢幕大小的種類又更多了，傳統在電腦上的網頁，在沒有RWD的設計下，整個塞到那小小的螢幕當中，使用者必須在「放大」、「移動畫面」中不停的操作才能看清楚內容，非常麻煩；會需要透過行動裝置來找資料，通常都是比較緊急，這時就真的就在考驗使用者的耐心了。

因為，慢慢開始有人針對行動裝置設計較小畫面的網站，一開始，使用者使用行動裝置近到電腦版畫面，選單上會提供一個按鈕「切換到手機版」，讓使用者可以切換到針對行動裝置設計的網站，只是有些時候，明明已經切換到小裝置版的畫面了，點了某些連結之後，又回到了電腦大小的畫面，必須再一次手動切換回去；後來，夠進步一點，網站自動偵測到使用者使用的是行動裝置後就自動重新導向（redirect）到針對小畫面設計的網站，通常網址都會以m作為開頭（例如：m.website.com），這類網站也被稱做m-dot網站。

這樣的做法也意味著開發團隊一次必須維護兩個以上相同功能的網站，當網站內容改變或是功能修改時，必須同時更新另外一個網站，除了有額外工作之外，更容產生網站問題，例如：大畫面網站改動了，但漏改了小畫面網站；如果該網站還針對超大畫面或是介於電腦和手機畫面開發了第三個網站呢？

另外一個問題就是，因為原本是針對電腦設計的畫面，當改成小畫面設計時，常常因為資訊過多，而刪減了很多的內容，造成兩邊的資訊不同步，有點像是行動裝置版的網站為電腦版的精簡版網站，如果使用者主要想用行動裝置來處理事情，將造成資訊不足而無法達成原本想做的事情。

例如：

• Yahoo
• PCHome
• 博客來

RWD網頁設計的出現

RWD主要的優勢在於透過一份網站內容，一份程式碼，便可以針對不同螢幕大小自動改變尺寸，改變版面的配置，讓網站可以自動適應個個種不同大小的畫面，除了可以減少工作量，也較不容易出錯，維護上也更為容易。

例如：

• HTC官網
• aaronlife網站

RWD優點

在各種裝置上合適的設計

響應式設計讓網頁可以以最合適的版面顯示在手機、平板、電腦、電視以及其他不同螢幕大小的裝置上，這一切行為都是自動的，而且不僅讓目前各種不同螢幕大小可以合適的顯示之外，未來會出現的新裝置，也都可以支援。

較少的工作

除了在剛開始的規劃時需要針對不同大小做規劃的工作之外，網站開發完成之後，因為只存在一份內容、一份程式碼，因此開發團隊只需要維護一個版本的網站，也不會有因為利用「裝置偵測」而透過重新導向的做法出現的錯誤導向問題。當網站持續發展，網頁更新，甚至是網頁出現問題的修正等等，都只需要對一個網站去做修改，不會出現因為修改過程的疏忽造成網站內容不同步的情形。

搜尋引擎最佳化

因為搜尋引擎是針對每個網址去做索引以及擷取，當你的網址被點擊的次數越多，其搜尋的排序也會越前面，但當你針對多種不同畫面設計多個網站時，即使是同一個畫面的資料，但是對搜尋引擎來說，卻是兩個不同的網址，這對點擊率來說，將會造成分散。而且，使用者很有可能在行動裝置上搜尋到的是點腦版的網頁，而且電腦上用尋到形動裝置版的網頁，甚至出現一個頁面的兩種版本，這對搜尋排名都會有負面的影響。

在2012的時候，Google建議使用響應式設計，因為這樣除了對使用者有較好的體驗之外，對於Google的網站爬蟲（crawler）也可以更有效率的擷取你的網站內容，這樣也意味著，網站的任何更新，都可以更快地在搜尋結果中被更新。

RWD原理

媒體查詢

RWD網頁的最關鍵技術就是媒體查詢（Media Query），媒體查詢是CSS3提供的技術，該技術可以讓設計師設定多個解析度的區間，根據不同區間來使用不同的樣式；也可以想像成有多個CSS樣式，透過媒體查詢來切換。

其實CSS Media Queries並不算是CSS3的新技術，早在CSS2時就已經存在了，但當時支援的設定較少，大多只是用來提供印表機列印的需求，而做出兩種不同的CSS排版，讓列印時，可以紙列印內容，而不需要將整個選單都列印進來！但現在因為行動裝置、智慧型手機的普及化，因此CSS3的Media Queries便提供了更多的功能，支援更多元的裝置。

所以，所謂的「RWD自適應網頁設計」，一般指的就是CSS Media Queries這個技術的應用。

/* 樣式 */

@media screen and (max-width: 699px) and (min-width: 520px) 
{
    /* 樣式 */
}

@media screen and (max-width: 1000px) and (min-width: 700px) 
{
    /* 樣式 */
}

@media screen and (min-width: 1001px) 
{
    /* 樣式 */
}

viewport與螢幕解析度的關係

viewport用來代表網頁可以顯示的畫面空間，讓這顯示的空間根據瀏覽器的devicePixelRatio屬性來重新定義其解析度，可以想像成是一個虛擬的「視埠」，通常這個虛擬的「視埠」（viewport）解析度與真實的解析度不一樣且較小，這樣在高解度的手機螢幕下，畫面就不會縮得很小，而擠到很小的手機畫面上；因此，在行動裝置上的瀏覽器支援了viewport這個meta的HTML標籤，讓網頁開發者來控制viewport的大小和縮放，而一般在手機上，我們會將viewport直接設定為手機的預設大小，也就是device-width這個值。

常見手機預設device-width

網站設計策略

內容優先

在網站設計之初，應該先想好網站需要哪些內容，而不是先設計好版面，然後再將內容放到版面裡，這樣很容因為了屈就於版面的設計而造成內容因為放不下而被刪減，或是屈就於版面的配置，而造成內容擺放的位置不合邏輯；而這也可能因為內容過少，而造成版面空間的浪費，或是留白過多，而讓人網站內容不夠充實的感覺。

因此，當我們在設計一個網站的時候，先考慮好，這個網站需要哪些內容，然後再根據這些內容設計網頁版面及架構，也根據這些內容，決定該怎麼分類，進而設計該有多少選單，選單上有哪些選項等等。

內容同等

在設計要同時支援行動裝置以及電腦的網頁時，其網頁內容應該一樣，而不是因為行動裝置畫面較小而透過刪減電腦版上的內容，因為人們會希望在行動裝置上和電腦上看到的資訊一樣，甚至有越來越多人，只會使用行動裝置上網。

在行動裝置功能越來越強大的同時，已經慢慢電腦的很多事情，許多人利用行動裝置來購物、看新聞、查詢資料等等，如果購物網站在行動裝置上只簡單的顯示商品名稱、售價，而新聞只顯示標題以及簡短的前言，使用者因為無法得到完整的訊息，因此沒有辦法做選擇或是了解詳細資訊，因此，在現代，不管網頁顯示在何種裝置上，都要讓內容是同等的。

行動優先

行動優先（Mobile First）該名詞是由一個知名的設計師與介面規劃師Luke Wroblewski提出的，當過美國yahoo架構設計負責人，他在2010年的時候進行了一次簡報，其標題就是Mobile first（原始簡報與影片：https://www.lukew.com/presos/preso.asp?26）。

以AT&T的手機數據流量來看，在3年內成長了50倍，也就是有越來越多的人使用行動裝置來上網，行動裝置正爆炸性的在成長，而且更多的潛能還持續被開發出來。

行動裝置也更容易在任何時候被使用，例如在捷運上、躺在床上、上廁所等等，都可以被使用，因此在網頁的瀏覽率上將比電腦還高，而Google、Facebook、Adobe等等大公司也都開始以「行動優先」來設計自己的產品。

那什麼是行動優先？當你開始設計一個新網頁時，以行動裝置的小畫面來設計版面，並填入內容，之後再設計較大螢幕裝置，如平板、電腦，最後才是最大畫面的電視等等，這樣一來，網頁將會非常適合使用行動裝置來瀏覽，而且，由小畫面放大至大畫面，因為畫面變大了，內容的擺放也更大的容易，但是如果是從大畫面開始設計，當要轉換成小畫面時，其內容的擺放將會較為困難，甚至需要透過閃簡內容才能放入較小的版面當中，這樣一來，有可能行動裝置上出現的是精簡過的內容，而不是使用者想要的完整的內容。

優雅降級

優雅降級（Graceful Degradation），即是在一開始開發或設計一個系統或網站時，直接針對最新、最完整的環境來設計，然後針對其它環境或是較舊的版本來進行修改與刪減功能。使用這個方式開發網站，通常會先會挑選一個有最完整功能的平台完成所有的功能和體驗，然後再針對無法支援所有功能的平台或環境來做修改或其他方案，讓其較舊的平台至少可以使用主要的功能，而不是無法使用。

這種作法通常就是在最新的環境下提供「最好的使用者體驗」，而在舊有或過時的平台上提供「簡陋卻可用 (poor but passable)」的功能。

漸進增強

所謂的漸進增強（Progressive Enhancement）就是從限制最多的環境開始出發，然後再慢慢擴展到沒有限制的環境當中，以提供家的使用者體驗，這也是「行動優先」的設計方式。

使用這個方式來開發，會需要較多的時間、人力、資源開發，初期開發成本較高，但是漸進增強提供更好的穩定性以及平台支援，以長期來說反而減少維護、開發成本。與之相反的優雅降級則是在開發初期僅需要把所有資源集中在一個最完整且較容易開發的平台上，迅速的開發出網站，然後可以趕快推出，之後再慢慢使用優雅降級的方式支援限制較多的環境上，這樣在人力或資源上可以做到最有效的節省。

RWD初探

各畫面大小的解析度該如何決定

• 智慧型手機尺寸：480
• 平板電腦尺寸：481~1023
• 一般電腦螢幕尺寸：> 1024








最基本的網頁架構

<!DOCYPTE html>
<html>
<head>
<title>我的第一個網頁程式</title>
</head>
<body>

</body>
</html>




程式碼內註解

註解是為了幫助程式開發人員了解程式內容，註解會被解譯器直接忽略，不會影響程式執行效能。

標籤語言規則：

1. 除了!DOCTYPE標籤之外，其它標籤必須成對，例如：有<html>標籤，必有一個</html>作為結束。
2. 標籤彼此不可以交錯。
3. 如果標籤內沒有內容，可以在標籤名稱後面加上斜線（/）來表示合併結束標，如：<br />。
4. 標籤英文字不分大小寫，但習慣上會以小寫為主。

RWD實作(1) - 我的首頁

完整程式碼

index.html

<!DOCTYPE html>
<html>
<head>
    <!-- 一般建議title不要超過64bytes -->
    <title>我的第一個網站</title>
    <meta charset="utf-8"/>

    <!-- viewport加上後，在手機上才不會以原始解析度顯示網頁 -->
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="main.css" />
    </head>

    <body>
    目前畫面寬度：<span id="res"></span>
    <script>
    document.getElementById('res').textContent = window.innerWidth;

    window.onresize = function()
    {
        document.getElementById('res').textContent = window.innerWidth;
    }
    </script>

    <!-- 網站大標題與主選單 -->
    <header>
    <h1>Aaron Ho個人網站</h1>
        <nav>
        <ul>
        <li>首頁</li>
        <li>關於我</li>
        </ul>
        </nav>
    </header>

    <!-- 網站內容本體 -->
    <article>
    <img src="pic.jpg" alt="封面照片" />

    <h3>自我介紹</h3>
    <p>熱愛程式語言，喜歡追求優美的軟體架構，不斷的學習新的程式語言和新的技術，
    寫程式重視優良的架構和簡約的模組化，總認為沒有寫不出來的程式，只有不想寫的程式
    ；夢想有一天可以用程式技術改變世界，讓人們未來的生活更加安全及方便。</p>

    <h3>對自己的期許</h3>
    <ul>
    <li>學會HTML、CSS、Javascript。</li>
    <li>學會自行架設網站。</li>
    <li>學會使用框架。</li>
    </ul>
    </article>

    <!-- 側邊選單 -->
    <aside>
    <h2>我的筆記</h2>
    <nav>
        <ul>
        <li>2017-06-24</li>
        <li>2017-07-01</li>
        <li>2017-07-08</li>
        <li>2017-07-15</li>
        <li>2017-07-22</li>
        <li>2017-07-29</li>
        </ul>
    </nav>
    </aside>

    <footer>&copy; 2018 Aaron Ho</footer>
</body>
</html>

main.css

/* 這是註解 */
body 
{
    background-color: #507ACE;
    color: #474747;
    font-family: "微軟正黑體", Tahoma;
}

img
{
    width: 100%;
}

header, article, aside, footer
{
    border: 1px solid #000;
    box-sizing: border-box;
}

/* 電腦樣式 */
@media screen and (min-width: 768px)
{
    body
    {
        background-color: #059B4A;
    }

    article
    {
        float: left;
        width: 70%;
    }

    aside
    {
        float: right;
        width: 30%;
    }

    footer
    {
        clear: both;
    }

    img
    {
        width: 50%;
    }
}

執行結果

參考資源

加強練習

修改本週上課範例，新增支援平板的畫面。

• 解析度為：４８０ｐｘ~６９９ｐｘ
• 背景顏色：自選
• 內容：將側邊欄位置改至與電腦模式相反。