很久很久以前

想當年 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
CSS/HTML 1 套 n 套,依裝置而定
操作複雜度 愈複雜愈高 單一裝置相對單純
維護成本 愈複雜愈高 裝置越多越高
時間成本 愈複雜愈高 裝置越多越高

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

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


Flexbox, Grid

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

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

Grid for layout, flexbox for component.

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

應用 Flexbox Grid
排版 單維度 多維度

疑?也太少!

也許有人會抗議,那個 Flexbox 不是也有 columnrow 怎麼可以說是單維度?好吧,我舉個例子,

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

然後我寫一個 Grid,

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

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

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


所以說那個手機版

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