本文目錄導(dǎo)讀：

1. 基礎(chǔ)高度設(shè)置
2. 視口單位
3. flexbox布局
4. grid布局

移動(dòng)端CSS中高度的設(shè)置方法

在移動(dòng)端開(kāi)發(fā)中，CSS高度的設(shè)置是一個(gè)重要的環(huán)節(jié)，不同于桌面端，移動(dòng)端設(shè)備種類(lèi)繁多，屏幕大小各異，因此高度設(shè)置需要更加靈活和適應(yīng)性強(qiáng)。

基礎(chǔ)高度設(shè)置

在CSS中，高度設(shè)置可以通過(guò)多種方式實(shí)現(xiàn)，包括像素、百分比、em等，像素是***基礎(chǔ)的高度單位，適用于固定高度的布局。

.container {
  height: 300px;
}

百分比高度則適用于高度隨容器變化的布局。

.container {
  height: 100%;
}

視口單位

在移動(dòng)端開(kāi)發(fā)中，視口單位（vw、vh）常常用于設(shè)置高度，視口單位相對(duì)于視口的大小進(jìn)行縮放，無(wú)論屏幕大小如何變化，都能保持相對(duì)固定的布局效果。

.container {
  height: 10vw; /* 視口寬度的10% */
}

flexbox布局

Flexbox布局是一種靈活的布局方式，可以方便地設(shè)置容器和子元素的高度，通過(guò)flex屬性，可以輕松地實(shí)現(xiàn)高度自適應(yīng)的效果。

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.item {
  flex: 1; /* 高度自適應(yīng) */
}

grid布局

Grid布局是另一種靈活的布局方式，適用于創(chuàng)建復(fù)雜的網(wǎng)格結(jié)構(gòu)，通過(guò)grid-template-rows屬性，可以方便地設(shè)置每一行的高度。

.container {
  display: grid;
  grid-template-rows: 1fr 2fr 1fr; /* 三行高度分別為1/3、2/3、1/3 */
}

在移動(dòng)端開(kāi)發(fā)中，高度設(shè)置需要結(jié)合具體的布局需求和設(shè)計(jì)目標(biāo)進(jìn)行選擇，通過(guò)靈活運(yùn)用上述方法，可以創(chuàng)建出適應(yīng)性強(qiáng)、布局靈活的移動(dòng)端界面。