想當年 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 (Responsive Web Design) 與 AWD (Adaptive Web Design) 這兩種方式。最主要的差異在於,
所以,我們常聽到的「手機版」基本上就是從 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 需要另外設計過。這一點就不在這邊過多著墨了。
這兩套都是目前比較主流的格線系統操作方式。差別在於 Grid 能做到的事情更多,以目前的 可使用程度 來看,應該也是可以開始應用在產品上了。
這兩個項目的差異,比較常聽到的是,
Grid for layout, flexbox for component.
然後你可以拿這句話去餵一下 Google 應該會找到不少東西。為什麼會這樣說呢?其實這有股寄生於和聲量既生瑜,何生亮的淡淡的哀傷,把這兩個項目攤開來看,應該就可以體會我在說些什麼。
應用 | Flexbox | Grid |
---|---|---|
排版 | 單維度 | 多維度 |
疑?也太少!
也許有人會抗議,那個 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,請不要叫什麼手機版這麼庸俗的名字。
Blog 同步刊登:[12th 鐵人賽] 從響應式的那個東西說起 Day 6