CSS 垂直媒體查詢的用例

發布時間：2021-06-22 15:26:45

兩周前，Sara Soueidan 在推特上表達了對 CSS Vertical Media Queries 的熱愛，我記得我在一些項目中使用過它們，所以我決定寫一篇關于它們的文章。

我們都喜歡媒體查詢，不是嗎？沒有它們，我們的布局將無法響應。媒體查詢檢查min-width并max-width廣為人知并被大量使用。在本文中，我們將探討在 CSS 中使用垂直媒體查詢的不同用例。所以我們將重點放在min-height和max-height。

1. 分節內容

有時設計師在一個被分成多個部分的網頁上工作，每個部分都應該占據整個視口高度。在 CSS 中，最簡單的方法是使用 viewport unites vh, vw, vmin, vmax。如果每個部分都有幾乎填滿它的內容，則在較小的視口高度下，這將導致重疊問題，因此我們會注意到每個部分內容都出現在另一個之上。

解決方案是我們height: 100vh僅在高度大于指定值時應用，測試您的設計，當您發現某些東西損壞時，添加一個斷點。

演示

現在，部分默認高度將由其中的內容決定，如果視口高度大于 400 像素且寬度 > 100vh500像素，則部分高度將為（視口的 100%）。

2. 固定標題

固定標題是一種趨勢，如今客戶要求很多。我個人不喜歡它們，因為它們占據了屏幕空間，特別是如果高度有點大。在較小的視口屏幕中，例如移動橫向模式，為什么不固定標題？只有在達到一定高度后，我們才能使它像這樣，這樣我們就可以確保它不會從屏幕空間中占據太多空間。

演示

3. 固定頁腳

當您的設計中有固定頁腳并且您希望在滾動時固定它時，您可能會遇到視口高度不夠大的問題，英雄部分內容將與頁腳重疊，用戶將無法閱讀文本。因此，只有在視口高度良好時，我們才會為欄應用固定的東西。

演示

4. 模態

通常模態（對話框）應該垂直和水平居中。這樣做的目的是抓住用戶的注意力。但是，在較小的視口屏幕中，模態頂部和底部邊緣可能非常接近屏幕垂直邊緣。在這種情況下，最好使模態僅水平居中，而對于垂直居中，它將堅持頂部（不居中）。

演示

5. 手機菜單

移動導航有很多模式。其中之一覆蓋整個屏幕，如下圖所示。在移動縱向模式下，它幾乎看起來不錯，用戶不需要向下滾動很多。但是在橫向模式下，滾動會很煩人，因此解決方案是檢查高度，如果它小于400px例如，每個導航項將占據 50% 的寬度。

演示

6. 側邊欄對比 標題

在某些情況下，在固定在頂部和側面之間切換標題元素很有用。我們可以通過檢查寬度和高度來做到這一點。

演示

7. 縮小字體大小和間距

簡單的想法是縮小字體大小和間距以在高度不夠時顯示更多內容。雖然我不建議 100% 遵循這種方法，但一定要小心使用它。測試，測試，測試……

Bootstrap 有一個很好的例子，當我搜索這個主題時，我在 CSS Tricks 上找到了一個頁面，其中有一個關于這個想法的例子。

演示

結束

這是結束！您有什么有趣的用例想與我分享嗎？我很高興在 Twitter 上收到您的來信！