還記得前兩天我們在玩貼紙簿的時候,問過這個問題:我們的整個網頁到底多寬多高呢?我們並沒有給出任何絕對長度,例如 1080px,或 36cm 等等。不過,由於我們使用了 vw, vh 這些單位,所以我們的貼紙,會隨著整個瀏覽器視窗的寬高,來調整大小。
這樣的方式,除了我們這些阿嬤工程師可以不用擔心使用者的視窗大小之外,無論使用者使用什麼樣的設備,也可以看到類似的網頁外觀。例如,前兩天我們也看了幾個大品牌的網站。不過,那時候我們是用電腦看的,所以整個網頁的外觀,是橫向的長方形,寬度比高度來得長。不過,如果用手機看這個網頁,由於手機是直向的長方形,高度比寬度來得長,所以,假使我們把區塊元素的長寬用絕對長度寫死,手機就只能看到整個網頁的左側,而無法看到整個滿版橫幅了。
這種可以適應各種視窗大小與設備的網頁設計方式,我們就叫作「響應式設計」(responsive web design)。
由於現在使用者用來逛網站的設備各形各色,從手機、平板、電腦都有,所以響應式設計就顯得非常重要,幾乎是所有商用網站的標準備配了。由於這樣的設計對於使用者非常友善,也會提高搜尋引擎對於網站的評價,提高網站搜尋引擎找出結果的優先順序,也就是 SEO 喔!
我們來想想看,除了區塊的寬高以外,我們在使用不同設備的時候,還可能發生哪些因為視窗寬高不同,而引發的問題呢?
讓我們重新看看 Nike 的網頁好了,那時候是長這樣的:
網頁中有 3 個到 4 個水平排列的區塊元素,看起來很大器。不過,那是因為我們使用電腦觀看,所以視窗有足夠的寬度,可以放下這些區塊。假使我們使用手機,這些區塊就會完全壓縮在中間,變得非常狹窄。我們用前幾天的貼紙簿練習來看看,在手機上會長怎樣:
如果我們還是採取相同的排版,那原本的美圖就看不見了!因此,在較窄的裝置上,我們不只要相應地改變區塊元素的寬高,甚至還必須改變整個版面的配置。讓我們來看看 Nike 是怎麼作的吧:
我們可以看見,Nike 將整個排版,從原本的 4 個區塊元素水平並列,變成單個區塊元素垂直排列了。這樣的重新排版,讓所有圖片都還是可以正常展現。換句話說,我們是因應了視窗的寬高,而改變了排版的方式。
那麼,我們是怎麼知道視窗的寬高呢?在回答這個問題以前,先讓我們想想,視窗寬高會是瀏覽器實際上渲染出的內容,還是告訴瀏覽器應該怎麼渲染出元件呢?當然是後者。那麼,我們這種標籤會放在哪邊呢?沒錯,就是 head 標籤當中。我們會使用 meta 標籤,並且將 name 屬性設為 "viewport" (視圖,也就是可看見區域的大小)。這樣作以後,就可以在 content 屬性中,設定一些關於網頁尺寸的內容囉。
例如,我們通常需要告訴瀏覽器,我們可看見區域的寬度是多少,因此,我們必須在 content 中設置 width=device-width,表示我們的可看見區域的寬度,就是設備 / 瀏覽器的寬度。另外,我們也必須設定最初的顯示比例 initial-scale,通常是設定為 1。因此,整個標籤看起來會長這樣:
<meta name="viewport" content="width=device-width, initial-scale=1">
注意 content 屬性內的各項設定是用半形逗點 "," 隔開,而不是半形分號;屬性和值之間也是用等號而非冒號隔開喔!
另外,在 CodePen 當中,由於我們沒有寫 head 標籤,所以會需要進入設定之後,在 <Stuff for head> 的區塊填寫。不過,CodePen 也很貼心地提供了 "Insert the most common viewport meta tag" 的選項,幫助我們快速輸入上面那個標籤。
設定完 viewport,讓瀏覽器知道現在裝置 / 視窗的寬度以後,我們就可以開始根據視窗寬度,改變整個排版了。以昨天的貼紙簿為例,我們會需要告訴瀏覽器,在某個寬度以下的時候,我們的橘色貼紙應該和頁面同寬,而黃色貼紙應該變成整個直排,而且需要置中。我們會使用
那麼,我們會希望怎麼改變呢?我們或許會希望整個黃色貼紙大約滿版,但是和左右還是有個間距。黃色貼紙的寬高可能要差不多,看起來會和原本的版面比較像。你可能會開始很複雜的計算,不過這邊先讓我推薦這個很好用的相對長度單位:vmin,相當於是整個視窗最小的那個邊的長度。vmin 對於調整字型大小,或者調整區塊間距,都是個很好的選擇。我們可能會希望整個黃色貼紙佔整個手機螢幕最小邊的 90%,也就是 height: 90vim;這樣左右兩邊就抓手機螢幕最小邊的 5%,至於上邊也可以抓個 5%,所以就是 margin: 5vmin 0 0 5vim 就可以。這樣計算起來,整個橘色貼紙的高度就會是 765vmin。
這些改變的樣式,會寫在 @media 後面的花括弧當中,所以看起來會像這樣:
@media screen and (max-width: 576px){
.orange{
height: 765vmin;
width: 100vw;
margin: 0;
}
.yellow{
width: 90vmin;
height: 90vmin;
margin: 5vmin 0 0 5vmin;
}
}
這個 @media 的寫法,有個炫炮的術語,叫作「媒體查詢」(media query)。另外,值得注意的是,這段媒體查詢的樣式,必須寫在當中涵蓋到的選擇器類別之後;因為在整份 .css 檔案當中,比較後面才指定的樣式,會覆蓋掉前面指定過的樣式。因此,假使我們把媒體查詢的樣式,寫在原本的樣式之前,我們的瀏覽器就會用原本的樣式,蓋掉媒體查詢的樣式,看起來就會毫無改變囉!
當我們把這段媒體查詢的樣式,加在原本貼紙簿的樣式中以後,我們使用手機打開這個 CodePen 頁面,就會發現排版方式改變囉:
https://codepen.io/LogosChen/pen/JjJLZzJ
這個結果在嵌套的 CodePen 中比較看不出來,建議是直接使用手機打開另一頁。
你可能會說,天啊,每次都要跑去手機看也太麻煩了吧!? 而且平板和手機種類這麼多,我要怎麼確定我寫的成果在每種平板和手機上面看起來長怎樣!?
沒錯,所以發展者工具很貼心地提供了我們看各種裝置的功能:
只要點選左上角紅圈處的按鈕,右邊就會出現響應式的選單,可以模擬各種不同設備上看到的網頁樣貌囉!不過 CodePen 因為嵌套的關係,所以即使是 full mode 全螢幕模式,看起來還是不太正確。所以會需要另外把檔案下載下來 (還記得在哪嗎?在右下角的 Export 喔!),然後直接打開檔案,這樣看到的就會是正確的囉!
今天我們大致上介紹了響應式網頁的基礎設置方式,不過我們距離真正的響應式還有些距離。大家可以想想,要達到真正在各種設備上都提供使用者良好的體驗,除了今天介紹的:
想一想:使用發展者工具檢查看,底下這些網頁,那些有作響應式設計呢?假使有,它們在哪些地方作了不同設備間的改變呢?這些改變是否真的帶來較好的體驗,又有哪些地方可以改進呢?