[Day 24] 阿嬤都看得懂的響應式網頁設計在幹嘛

13th鐵人賽

Logos50607

團隊Web 實驗室

2021-10-09 17:59:55

1258 瀏覽

分享至

阿嬤都看得懂的響應式網頁設計在幹嘛

還記得前兩天我們在玩貼紙簿的時候，問過這個問題：我們的整個網頁到底多寬多高呢？我們並沒有給出任何絕對長度，例如 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，讓瀏覽器知道現在裝置 / 視窗的寬度以後，我們就可以開始根據視窗寬度，改變整個排版了。以昨天的貼紙簿為例，我們會需要告訴瀏覽器，在某個寬度以下的時候，我們的橘色貼紙應該和頁面同寬，而黃色貼紙應該變成整個直排，而且需要置中。我們會使用

@media
這個寫法，告訴瀏覽器，我們要開始看看整個視窗尺寸是多少囉！既然我們是要看整個視窗的尺寸，我們就會使用螢幕 (screen) 這個字樣，並且告訴瀏覽器，視窗尺寸最小是多少的時候，我們的排版樣式要改變了。我們通常會選擇某些特定裝置的寬度，當成我們樣式改變的切點 (breakpoint)；以手機而言，我們會選擇 576px。

那麼，我們會希望怎麼改變呢？我們或許會希望整個黃色貼紙大約滿版，但是和左右還是有個間距。黃色貼紙的寬高可能要差不多，看起來會和原本的版面比較像。你可能會開始很複雜的計算，不過這邊先讓我推薦這個很好用的相對長度單位：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 喔！)，然後直接打開檔案，這樣看到的就會是正確的囉！