JQuery Mobile 是一款專(zhuān)門(mén)針對(duì)移動(dòng)設(shè)備的 JQuery 框架。在它的網(wǎng)格系統(tǒng)中，為了處理不同設(shè)備的屏幕大小及響應(yīng)式布局，網(wǎng)格高度是一個(gè)非常重要的因素。

Block A
Block B
Block C

在上述代碼中，我們使用了一個(gè) ui-grid-b 類(lèi)來(lái)定義一個(gè) 3 列的網(wǎng)格。每列元素通過(guò) ui-block-a、ui-block-b、ui-block-c 類(lèi)來(lái)定義。為了處理不同設(shè)備的屏幕大小，我們?yōu)槊總€(gè)元素手動(dòng)指定了高度，用 style 屬性來(lái)設(shè)置。

另一種方式是使用基于比例的高度，這需要在 CSS 中使用 calc() 函數(shù)。

.ui-grid-b {
display: flex;
}
.ui-block-a {
height: calc(50% - 20px);
}
.ui-block-b {
height: calc(100% - 20px);
}
.ui-block-c {
height: calc(75% - 20px);
}

在上述 CSS 代碼中，我們通過(guò) flex 布局來(lái)自動(dòng)根據(jù)元素寬度計(jì)算高度。然后使用 calc() 函數(shù)來(lái)減去間隔（20px）的高度。這樣做可以確保每個(gè)元素的高度與自己在整個(gè)網(wǎng)格中的相對(duì)比例一致。

在 JQuery Mobile 的網(wǎng)格高度中，可以使用手動(dòng)指定高度或自動(dòng)計(jì)算比例兩種方式。正確地設(shè)置網(wǎng)格高度可以幫助我們更好地適應(yīng)不同設(shè)備及響應(yīng)式布局。