[12th 鐵人賽] 從響應式的那個東西說起 Day 6

很久很久以前

想當年 Photoshop 可以把圖片輸出成網頁用的東西的時候，你會發現有兩種模式，

<table>
    <tr>
        <td><img src="/static/hero_01.jpg"></td>
        <td><img src="/static/hero_02.jpg"></td>
        <td><img src="/static/hero_03.jpg"></td>
        <td><img src="/static/hero_04.jpg"></td>
    </tr>
    <tr>
        <td><img src="/static/hero_05.jpg"></td>
        <td><img src="/static/hero_06.jpg"></td>
        <td><img src="/static/hero_07.jpg"></td>
        <td><img src="/static/hero_08.jpg"></td>
    </tr>
</table>

如果有使用樣式表的話，則會變成，

<div class="hero">
    <div class="hero_01"><img src="/static/hero_01.jpg"></div>
    <div class="hero_02"><img src="/static/hero_02.jpg"></div>
    <div class="hero_03"><img src="/static/hero_03.jpg"></div>
    <div class="hero_04"><img src="/static/hero_04.jpg"></div>
    <div class="hero_05"><img src="/static/hero_05.jpg"></div>
    <div class="hero_06"><img src="/static/hero_06.jpg"></div>
    <div class="hero_07"><img src="/static/hero_07.jpg"></div>
    <div class="hero_08"><img src="/static/hero_08.jpg"></div>
</div>

然後樣式表當中就會出現這樣的結果，

.hero {
    position: relarive;
    overflow: hidden;
}
.hero_01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100px;
}
.hero_02 {
    /* 後略 */
}

不過當年沒有那麼多行動裝置，所以這樣的操作方式並沒有什麼不妥。如果放到現在這個年代，那麼這樣應該就不是很恰當了。爾或者說，如果你的目標對象並沒有那麼多顯示尺寸，那麼這樣做也不是不行。舉例來說，如果你就只是要輸出菊八開的顯示尺寸，那麼應該沒有太大問題。

不過這種情境畢竟不多，在手機盛行的這個年代，大家都希望自己手上的裝置能夠顯示正確，所以需要顧及到的尺寸就變得五花八門。所以，所謂的響應式的網頁設計，才會在這些年慢慢的被玩壞。

RWD, AWD

提到響應式，最常被討論的就是 RWD (Responsive Web Design) 與 AWD (Adaptive Web Design) 這兩種方式。最主要的差異在於，

• RWD 只需要寫一份網頁、一套樣式表，但是這一套需要適用各種尺寸。
• AWD 則是針對需要的尺寸個別製作需要的樣式表，以及所需的網頁結構。

所以，我們常聽到的「手機版」基本上就是從 AWD 的概念出發。就像是你會發現有的網站會有個 /m/ 結尾，或是用 https://m.xxx 開頭，這些基本上，大多數情況下是給行動裝置使用的網頁。所以，AWD 需要面對的是行動裝置的面向，但，行動裝置尺寸那麼多，只做一個版本夠嗎？

嗯，通常也只會有一種版本。

AWD 最主要的目的，是針對特定裝置做最佳化輸出，無論你是哪一種行動裝置，他就只是依照規則輸出一種最佳化的版本。當然，你想要在這種輸出方式裡面，應用 RWD 的概念也不是不行。只是，既然是最佳化的輸出版本，這麼做是不是合適就見仁見智了。

至於 RWD 這件事情，就是你把瀏覽器的視窗拉大或是縮小，畫面上會跟著做些調動、改變，這個基本上就可以稱之為響應式網頁設計。是說，做得好或是不好就不在這個討論範疇。根據前幾天 如果前幾天的幹話你還沒忘記 的敘述，我個人偏好從「小尺寸」往上來製作。

接著就是一大堆的 @media 的操作。是的，對於 RWD 的製作上，就是根據各種不同的情況，設計不同的 @media 來符合，或是說「響應」那樣的情況，進而產生結果。然而，這邊就不像是 AWD 一樣，由於所有的設計、結構、條件安排都做在「同一份」，所以基本上是無法把 AWD 的概念接進來的。

換句話說，AWD 可以再搭配 RWD，反過來就不太行。

市面上的 RWD / AWD 的優劣比較我這邊就不贅述，這裡提出我自己的看法，大家參考參考。

好，結論就是 RWD 越複雜越難搞，AWD 就是裝置越多越難搞。其實面向差不多，所謂的 RWD 「越複雜」，把對象換成 AWD 就代表這「裝置越多」的狀況。我得承認這是廢話。

面對使用情境上你該怎麼選？就端看你的「後端」或是「系統端」那邊的人是否能夠支援，通常來說 AWD 比較會有切割網站的需求，例如剛剛提到的 /m/ 或是 https://m.xxx。換句話說，你的 SEO 需要另外設計過。這一點就不在這邊過多著墨了。

Flexbox, Grid

這兩套都是目前比較主流的格線系統操作方式。差別在於 Grid 能做到的事情更多，以目前的 可使用程度 來看，應該也是可以開始應用在產品上了。

這兩個項目的差異，比較常聽到的是，

Grid for layout, flexbox for component.

然後你可以拿這句話去餵一下 Google 應該會找到不少東西。為什麼會這樣說呢？其實這有股寄生於和聲量既生瑜，何生亮的淡淡的哀傷，把這兩個項目攤開來看，應該就可以體會我在說些什麼。

疑？也太少！

也許有人會抗議，那個 Flexbox 不是也有 column 跟 row 怎麼可以說是單維度？好吧，我舉個例子，

.flexbox {
    display: flex;
    flex-flow: row nowrap;
}

然後我寫一個 Grid，

.grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 1rem;
}

這樣你可以明白，為什麼 Grid 是多維度了吧。對於 Flexbox 的生態系統來說，他每一次就是定義「一個方向」，無論是 column 或 row 都是「一個方向」。所以，我才會在這裡說他是單維度的設計。在後續的文章中，我會大量提及 Flexbox 與 Grid 的各種錯誤的使用方式。

對，各種錯誤的使用方式。

所以說那個手機版

現在知道「手機版」可以怎麼說比較高尚了嗎？我這個叫做「自適應網頁設計」，英文叫做 AWD，請不要叫什麼手機版這麼庸俗的名字。