情境

響應式設計(Responsive Web Design)可使網站在不同的裝置上瀏覽時對應不同解析度皆有適合的呈現，減少使用者進行縮放、平移和捲動等操作行為。

通常這種設計我們考量到的是寬度的變化，簡單來說，桌上型電腦的螢幕寬度最寬，次之是平板電腦，最後可能是手機：

從經驗上來看，我們會比較少遇到因為螢幕高度改變而做出響應式調整的設計。但其實水平方向的響應式跟垂直方向的響應式一樣都很重要。

事實上，網站開發者不能假設使用者總是會乖乖的使用我們的網站。
例如，我們會假設使用者「全螢幕」來瀏覽我們的網站：

但事實上，使用者很可能這樣來使用我們的網站：

降低瀏覽器的高度跟降低瀏覽器的寬度，會讓整個網站看起來一樣糟糕。我們做的網站是否能夠禁得起使用者各種不同花式 resize 的摧殘呢？

你能看見多遠的未來呢？

身為一個設計師或開發者，有時候我們會過度專注於頁面上寬度的變化，而忽略了高度上的變化。

手機版的導覽對話框

假設我們設計了一個手機版的導覽對話框，在目前這個寬度和高度下看起來沒什麼問題：

但是我們觀察一下，這個導覽對話框的內容已經佔滿了整個手機的高度，表示比這支手機還要小的螢幕，很有可能畫面會裝不下所有的內容。或者，我們沒有辦法在一頁當中增加導覽對話框的項目。畢竟我們不希望導覽對話框出現滾動條。

所以，我們或許可以把導覽項目變成兩欄，這樣能夠有效的節省垂直高度的空間：

網站主頁(Hero Section)

我們來看看下面這個網站主頁，我們希望主頁的高度佔滿全畫面，因此給他 100vh 的高度：

.hero-section {
  height: 100vh;
}

在螢幕高度變矮之前，一切看起來都很不錯，但是事實上，這個插圖並沒有辦法在高度變矮的時候還能完整的待在 hero section 當中，因此，他將會內容溢出並吃到下面的 section：

可能的解決方法是我們能夠透過 media query 來響應式調整 hero section 的高度，例如高度大於某個值之後才是使用 100vh，否則，就使用一個最小能裝得下 hero section 內容的高度：

@media (min-height: 700px) {
  .hero-section {
    height: 100vh;
  }
}

另一個寫法，我們可以使用 CSS 的功能符號(funcitonal notations)來限制 hero section 的最小高度：

.hero-section {
  height: max(700px, 100vh);
}

上面的意思是，我們高度是 700px 以及 100vh 中選最大值，換句話說，如果 100vh 的實際數值小於 700px 的話，hero section 就會是 700px。

另外一個方法，就是我們可以讓 hero section 中的內容隨著 hero section 的高度縮放，例如我們以 vh 當作圖片大小的單位，這樣能夠在高度變小的同時也縮小圖片。

凍結的導覽列

將導覽列凍結在視窗頂部是一個常見的設計，當頁面內容很長而需要往下滾動，若導覽列能夠凍結在頂部，這樣我們要做一些導覽列上的操作的時候，就不用再滾回最上面：

然而，這邊潛在的問題是，因為凍結導覽列會使得導覽列必定會佔據視窗上的高度空間，當視窗不高時，下面可閱讀區域會變得相對較小而不好閱讀：

因此，或許我們可以考慮當視窗高度大於某個高度時，才允許他凍結導覽列，當高度太小時，則不凍結：

@media (min-height: 700px) {
  .navigation-bar {
    /* position: fixed or position: sticky */
  }
}

凍結的導覽框

以上圖為例，左側是一個 Fixed 的導覽框，這也是一個很常見的排版。

我們可以看得到，由於我們導覽框中的項目很多，因此佔了視窗高度很大一部分。不過上圖是高度空間足以容納導覽框的案例。

但是當視窗高度空間不足的時候，導覽框就會跑到視窗之外，而無法有效發揮他的作用：

面對這樣的狀況，我們可能可以考慮下面兩種解決方案。

首先第一個，縮小字體以及選項高度。使用 media query，當高度小於某個 breakpoint 時，我們縮小字體、選項的高度，讓導覽框的高度能夠縮小。

我們可以看到，縮小字體以及項目高度之後，導覽框的高度已經被縮減了。
但事實上，這樣的縮減仍然效果有限，因為我們很難無止盡的縮小導覽框。

因此另外一個是需要做一點取捨，在這麼多選項當中，我們必須要挑選相對不那麼重要的選項，並適時隱藏這些選項來縮小導覽框的高度。

對話框元件

以上圖來看，是一個還沒發生問題前的完美對話框。
我們在設計對話框元件時，通常會讓他水平置中，但有時候，我們也需要讓他垂直置中。

.modal__body {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
}

但當內容發生變化，或高度發生變化時，錯誤就很可能會發生。
如下圖，當我們沒有對 Modal 對話框的高度進行限制時，內容變多就很可能會造成對話框溢出視窗範圍的狀況：

因此，我們可以考慮對 Modal 對話框的高度進行最小及最大高度的限制，並且允許他能夠出現滾動條。

當然，如果垂直置中這件事若造成對話框容易超出視窗範圍的話，我們也可以讓視窗在大於特定高度之後才設置對話框垂直置中：

.modal__body {
  position: absolute;
  left: 50%;
  top: 3rem;
  transform: translateX(-50%);
  width: 600px;
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
}

@media (min-height: 700px) {
  .modal__body {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

小結

我們在設計頁面時，常常會只考慮到視窗寬度的變化，而忽略高度變化可能造成的潛在錯誤。在本篇當中我們討論了視窗高度變化對畫面產生的影響，希望今天討論的範例能夠讓讀者瞭解考慮視窗高度變化的重要性。