如何使用 CSS Viewport 單位 vh 和 vmax 來實現自適應網格佈局-css教學-PHP中文網

首頁

web前端

css教學

如何使用 CSS Viewport 單位 vh 和 vmax 來實現自適應網格佈局

王林

Sep 13, 2023 am 11:21 AM

css viewport單位 vh單位 vmax單位

如何使用 CSS Viewport 单位 vh 和 vmax 来实现自适应网格布局

如何使用 CSS Viewport 單位 vh 和 vmax 來實現自適應網格佈局

在現代網頁設計中，自適應佈局是至關重要的一部分。它能夠讓網頁在不同尺寸的螢幕和裝置上都具備良好的可讀性和使用者體驗。 CSS Viewport（視窗）單位是實現自適應佈局的強大工具。其中，vh 和 vmax 是兩個常用的視窗單位，它們可以幫助我們在網頁設計中實現自適應網格佈局。

vh 是視口高度的百分比單位，1vh 等於視口高度的百分之一。 vmax 是視口寬度和高度中較大值的百分比單位，1vmax 等於視口寬度和高度中較大值的百分之一。這兩個單位都非常靈活，在自適應佈局中具備很高的適用性。

下面，我們將探討如何使用 vh 和 vmax 單位來建立自適應網格佈局。

首先，我們需要設定一個基本的網格容器。在 HTML 中，我們可以使用一個 div 元素來作為容器，並為其設定一個類別名，例如 "grid-container"。然後，在 CSS 中，我們可以為這個類別名稱添加樣式，來建立網格佈局。

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}

.grid-item {
  background-color: #eee;
}

在上述程式碼中，我們使用了CSS Grid（網格佈局）來建立一個具有三列的網格容器，其中的子元素是帶有".grid-item" 類別名稱的div元素。

接下來，我們將利用 vh 和 vmax 單位來讓這個網格佈局自適應。

首先，讓我們來設定網格容器的高度。我們可以使用 vh 單位來指定容器的高度為視口高度的一定百分比。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  height: 70vh;
}

在上述程式碼中，我們將容器的高度設定為視窗高度的70%。這樣，在不同尺寸的螢幕上，容器的高度會自動進行調整。

接下來，我們可以透過設定子元素的高度來使網格佈局的每個單元格高度自適應。

.grid-item {
  background-color: #eee;
  height: 100%;
}

在上述程式碼中，我們將子元素的高度設定為100%，這樣每個儲存格的高度就會根據容器的高度進行自動調整。

此外，我們還可以使用 vmax 單位來讓網格佈局在不同寬高比的螢幕上都能有良好的可讀性。例如，如果我們希望網格佈局的每個單元格的寬度與容器的高度的較大值相等，我們可以這樣設定：

.grid-item {
  background-color: #eee;
  height: 100%;
  width: 100vmax;
}

在上述程式碼中，我們將子元素的寬度設為100vmax，這樣每個單元格的寬度就會根據視口寬度和視口高度的較大值自動進行調整。

透過使用 vh 和 vmax 單位，我們可以輕鬆實現自適應網格佈局。這對於創建具備良好可讀性和用戶體驗的網頁設計非常有幫助。希望本文的範例程式碼能夠對你在網頁設計中使用Viewport單位來實現自適應網格佈局有所啟發。

以上是如何使用 CSS Viewport 單位 vh 和 vmax 來實現自適應網格佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

PHP教程

1596

276

Related knowledge

如何使用CSS Backdrop-Filter屬性？ Aug 02, 2025 pm 12:11 PM

backdrop-filter用於對元素背後的內容應用視覺效果，1.使用backdrop-filter:blur(10px)等語法實現毛玻璃效果；2.支持blur、brightness、contrast等多種濾鏡函數並可疊加；3.常用於玻璃態卡片設計，需確保元素與背景重疊；4.現代瀏覽器支持良好，可用@supports提供降級方案；5.避免過大模糊值和頻繁重繪以優化性能，該屬性僅在元素背後有內容時生效。

什麼是用戶代理樣式表？ Jul 31, 2025 am 10:35 AM

用戶代理樣式表是瀏覽器自動應用的默認CSS樣式，用於確保未添加自定義樣式的HTML元素仍具基本可讀性。它們影響頁面初始外觀，但不同瀏覽器存在差異，可能導致不一致顯示。開發者常通過重置或標準化樣式來解決這一問題。使用開發者工具的“計算”或“樣式”面板可查看默認樣式。常見覆蓋操作包括清除內外邊距、修改鏈接下劃線、調整標題大小及統一按鈕樣式。理解用戶代理樣式有助於提升跨瀏覽器一致性並實現精準佈局控制。

CSS暗模式切換示例 Jul 30, 2025 am 05:28 AM

首先通過JavaScript獲取用戶系統偏好和本地存儲的主題設置，初始化頁面主題；1.HTML結構包含一個按鈕用於觸發主題切換；2.CSS使用:root定義亮色主題變量，.dark-mode類定義暗色主題變量，並通過var()應用這些變量；3.JavaScript檢測prefers-color-scheme並讀取localStorage決定初始主題；4.點擊按鈕時切換html元素上的dark-mode類，並將當前狀態保存至localStorage；5.所有顏色變化均帶有0.3秒過渡動畫，提升用戶

CSS方面比例屬性是什麼？如何使用它？ Aug 04, 2025 pm 04:38 PM

Theaspect-ratioCSSpropertydefinesthewidth-to-heightratioofanelement,ensuringconsistentproportionsinresponsivedesigns.1.Itisapplieddirectlytoelementslikeimages,videos,orcontainersusingsyntaxsuchasaspect-ratio:16/9.2.Commonusecasesincludemaintainingres

如何在CSS中使用大眾和VH單元 Aug 07, 2025 pm 11:44 PM

vw和vh單位通過將元素尺寸與視口寬度和高度關聯，實現響應式設計；1vw等於視口寬度的1%，1vh等於視口高度的1%；常用於全屏區域、響應式字體和彈性間距；1.全屏區域使用100vh或更優的100dvh避免移動瀏覽器地址欄影響；2.響應式字體可用5vw並結合clamp(1.5rem,3vw,3rem)限制最小和最大尺寸；3.彈性間距如width:80vw、margin:5vhauto、padding:2vh3vw可使佈局自適應；需注意移動設備兼容性、可訪問性及固定寬度內容衝突，建議優先使用dvh

如何在CSS中樣式鏈接？ Jul 29, 2025 am 04:25 AM

鏈接的樣式應通過偽類區分不同狀態，1.使用a:link設置未訪問鏈接樣式，2.a:visited設置已訪問鏈接，3.a:hover設置懸停效果，4.a:active設置點擊時樣式，5.a:focus確保鍵盤可訪問性，始終遵循LVHA順序以避免樣式衝突，可通過添加padding、cursor:pointer和保留或自定義焦點輪廓來提升可用性和可訪問性，還可使用border-bottom或動畫下劃線等自定義視覺效果，最終確保鏈接在所有狀態下均有良好用戶體驗和可訪問性。

如何使用CSS：空偽級？ Aug 05, 2025 am 09:48 AM

：emptyPseudo-classSelectSelectsselemtswithnochildrenorcontent，包括pacesorcomments，sonlyTrulyEmpterementLikeMatchit; 1.ItcanhideEmptycontainersbousing：intume {note {note display：none;} toCleanuplayouts; 2.ItallowSaddingplacePlacePlacePlaceLanderStylingLingvia :: Forefore :: Forefor :: show offor :: show

如何在CSS中重疊元素？ Jul 30, 2025 am 05:43 AM

要實現CSS元素重疊，需使用定位和z-index屬性。 1.使用position和z-index：將元素設置為非static定位（如absolute、relative等），並通過z-index控制堆疊順序，值越大越靠前。 2.常見定位方法：absolute用於精確佈局，relative用於相對偏移並重疊相鄰元素，fixed或sticky用於固定定位的懸浮層。 3.實際示例：通過設置父容器position:relative，子元素position:absolute和不同z-index，可實現卡片重疊效果

See all articles

如何使用 CSS Viewport 單位 vh 和 vmax 來實現自適應網格佈局

熱AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題