響應式網頁中的高度設計，你認真的嗎？

做者：Ahmad Shadeed
譯者：前端小智
來源：ishadeed

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

最近開源了一個 Vue 組件，還不夠完善，歡迎你們來一塊兒完善它，也但願你們能給個 star 支持一下，謝謝各位了。

github 地址：https://github.com/qq44924588...

你們看到這個標題可能會覺得小智是否是又寫錯別字了 😂，響應式高度設計？你認真的嗎？ 由於「響應式Web設計」一般是在多個寬度和設備尺寸上檢查瀏覽器。 咱們通常經過減少寬度調整水平方向的響應能力，可是我不多看到經過減少瀏覽器高度來進行垂直響應的考慮。 此時，智米麼心裏可能有一絲的波動，並帶有許些疑問：咱們須要下降瀏覽器的高度嗎？ 是的，咱們一直探討一下。

當咱們在設計網站的時候，不依賴實際數據進行假設是很差的，水平和垂直測試的責任也是很是重要。

爲何要測試高度？

對於一個設計師來講，一個不合理的假設是毀掉一個網站設計的重要因素之一。例如，假設用戶確定是經過使用屏幕的全寬和全高瀏覽網站是不正確的。相反，咱們須要考慮最壞的狀況。

智米麼，看明白了嗎。現實狀況是，並不是全部用戶都按照咱們所指望同樣使用瀏覽器。 我發現下降瀏覽器高度時網站看起來很糟糕。

瀏覽器 DevTools

調整瀏覽器的大小(垂直方向)並非改變視口高度的惟一方法。當咱們打開瀏覽器DevTools，它也會佔用瀏覽器的高度。

上圖中的箭頭區域表明當前視口的高度，對於較小的筆記本電腦屏幕，咱們只會看到一小部分網頁。

真正的問題是：當視口高度較小時，咱們能夠加強用戶體驗嗎？ 是的，有可能，咱們來一塊兒看看。

CSS 中的垂直思考

做爲設計師和開發人員，咱們中的一些人只關注設計的寬度變化，而忽略了視口高度變化。例如，在開發中， UI 提供了特定組件在不一樣視口寬度上的變化。 可是，不一樣的視口高度又如何呢？

在上圖中，咱們有一個基於視區高度進行調整的導航菜單。。若是視口大小很小(好比，iPhone 5)，導航項將顯示爲一個兩列網格。這種思惟方式一般會被捨棄，或者直到有人說要作纔會這麼去優化。

CSS 中能夠經過使用兩種不一樣方式來實現上面的需求：

• Vertical media queries
• Viewport units

Vertical Media Queries

智米麼確定知識在CSS中使用寬度媒體查詢。

@media (min-width: 700px) {
  .element {
    /* do something.. */
  }
}

較少使用的是垂直媒體查詢，它檢查視口高度。

@media (min-height: 500px) {
  .element {
    /* do something.. */
  }
}

/* or */

@media (orientation: landscape) {
  .element {
    /* do something.. */
  }
}

視口單位

使用視口單位能夠幫助爲用戶提供更好的體驗。 例如，根據視口高度控制元素之間的垂直間距。

.hero__title {
  margin-bottom: calc(10px + 5vh);
}

如上所示，大比較大的屏幕（例如iMac 27英寸），下邊距就會變的很大。咱們有兩種方式來解決邊距過大的問題。

• Media queries
• CSS comparison 函數

第一種方式（媒體查詢）受到更多支持。 若是屏幕很大，咱們須要爲下邊距設置最大值。

@media (min-width: 2200px) {
  .hero__title {
    margin-bottom: 40px;
  }
}

另外一種方法是使用CSS clamp()比較函數，clamp() 函數的做用是返回一個區間範圍的值。

.hero__title {
  margin-bottom: clamp(10px, 5vh, 40px);
}

用例一：重疊內容

在此示例中，有一個section 區域，其中有標題和插圖的部分, section 高度等於視口高度的100％。

一切看起來都很好，直到視口高度變小。section 的高度將不足以容納插圖和文本內容。所以，它將與頁面上的其餘部分重疊。

注意插圖與下面的部分如何重疊。 發生這種狀況是由於有足夠的垂直空間。 看一下HTML和CSS。

<div class="hero">
  <div class="hero__wrapper">
    <div class="hero__content"><!-- content --></div>
    <img class="hero__thumb" src="figure.png" alt="" />
  </div>
</div>

css

.hero {
  height: 100vh;
}

.hero__thumb {
  flex: 0 0 550px;
  width: 550px;
}

下面是解決此類問題幾種解決方案：

• 爲插圖設置固定大小（寬度和高度），而不是僅設置寬度，缺少高度將會繼續存在這個問題。
• 僅當視口高度大於700px時才爲height: 100vh（媒體查詢值可能會根據上下文而有所不一樣）。

咱們能夠將二者結合起來，得到更強大的解決方案。

.hero__thumb {
  width: 400px;
  height: 300px;
  object-fit: contain; /* To avoid compressing the image */
}

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

好的，如今咱們贊成使用垂直媒體查詢更好。然而，使用100vh是有風險的，由於即便咱們限制了插圖的大小，也可能沒法對文本內容執行相同的操做。若是文本內容變長，一樣的問題會再次發生，參見下圖：

爲了解決這個問題，咱們可使用min-height而不是height。 這樣，若是內容變長，高度將擴大而且不會重疊。

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

固定頭部

在滾動時固定標題並非一件壞事，可是，咱們要確保只有在垂直空間足夠好的狀況下才固定標題，這樣體驗纔會好。

這是一個關於風景類的網站，這裏咱們能夠看到，當高度太小的時候，這個固定高度總體就會佔用很大的空間。這個對用戶真的重要嗎?大多數狀況是不重要的，由於通常用戶不會縮小成這樣去看一個網站。當前，若是咱們要優化也是能夠就是，思路就是經過垂直媒體查詢，判斷高度小於某個高度的時候就將固定定位改爲靜態定位。

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

隱藏不過重要的元素

我在Twitter.com的導航欄上注意到了這個模式。其思想是將垂直媒體查詢和Priority+模式結合起來。

調整視口高度的大小時，次重要的元素（書籤和列表）將被刪除並附加到「更多」菜單中，這是垂直媒體查詢的一個很好的用例。

.nav__item--secondary {
  display: none;
}

@media (min-height: 700px) {
  .nav__item--secondary {
    display: block;
  }
}

減小間距-導航

若是咱們網站有側邊欄或側邊欄，當視口高度很小時，咱們能夠減小一些導航項之間的垂直間距，這也會加強總體設計。

.nav__item {
  padding-top: 4px;
  padding-bottom: 4px;
}

@media (min-height: 700px) {
  .nav__item {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

模態框

咱們知道，模態框至少應該水平居中。可是，有時咱們還須要垂直居中，咱們通常會使用下面的方案：

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

可是，當內容變長時就會有問題，模態框會垂直填滿屏幕，用戶將沒法滾動它。

引起這種狀況下，有幾點緣由：

• 模態框沒有高度
• 模態垂直居中（這會問題更快的出現）

下面是修復後的 css:

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

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

注意，我使用了min-height和max-height。 min-height是即便內容很短也要保持模態看起來好，max-height是使用特定值限制其高度，而不是添加固定的高度。

總結

在設計一種體驗時，最好從寬度和高度的角度來考慮。垂直地調整瀏覽器的大小可能有點奇怪，但它也有它的優點。在本文中，咱們討論了垂直測試的重要性，以及咱們如何進行垂直測試，最後，提出了一些示例和用例，但願對智米們有用。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://hadeed.com/article/re...

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。