<div>元素是HTML中的一個重要標簽，用于創建一個容器，可以包裹其他HTML元素，也可以設置其樣式和布局。在移動設備上，屏幕尺寸千差萬別，為了確保網頁內容在不同屏幕上具有一致的呈現效果，需要對<div>元素進行適配，使其在不同屏幕上呈現出理想的布局和大小。本文將通過幾個代碼案例詳細解釋如何使用<div>元素進行屏幕適配。

案例一：使用固定寬度和自適應高度的<div>元素

，我們可以通過設置<div>元素的寬度為固定值（例如500像素），高度為自適應的方式進行屏幕適配。這樣，<div>元素會在不同屏幕上保持相同的寬度，同時根據內容的多少自動調整高度。

<style>
.container {
width: 500px;
height: auto;
}
</style>
<br>
    <div class="container">
<!-- 這里是<div>元素包裹的內容 -->
</div>

在上述代碼中，我們定義了一個名為.container的類，將寬度設置為500像素，高度設置為auto（即自適應）。然后，我們將<div>元素的class屬性設置為.container，使其應用這個樣式。

案例二：使用百分比設置<div>元素的寬度和高度

第二種屏幕適配的方法是使用百分比來設置<div>元素的寬度和高度。通過將寬度和高度設置為百分比，<div>元素會根據父元素的大小進行縮放，從而適應屏幕的尺寸。

<style>
.container {
width: 50%;
height: 50%;
}
</style>
<br>
    <div class="container">
<!-- 這里是<div>元素包裹的內容 -->
</div>

在上面的代碼中，我們將<div>元素的寬度和高度都設置為50%。這意味著<div>元素將占據其父元素的50%寬度和50%高度，無論父元素的大小如何變化，<div>元素都會自動適應屏幕的尺寸。

案例三：使用媒體查詢進行響應式布局

最后，我們可以通過媒體查詢來實現響應式布局，使<div>元素在不同屏幕尺寸上呈現不同的樣式和布局。媒體查詢允許根據屏幕寬度和其他條件來應用不同的CSS樣式。

<style>
.container {
width: 100%;
height: auto;
}
<br>
        @media (max-width: 768px) {
.container {
width: 50%;
}
}
<br>
        @media (max-width: 480px) {
.container {
width: 100%;
}
}
</style>
<br>
    <div class="container">
<!-- 這里是<div>元素包裹的內容 -->
</div>

在上面的代碼中，我們將<div>元素的寬度設置為100%，高度設置為auto，使其占據整個父元素的寬度，并自適應高度。然后，我們使用媒體查詢來針對不同屏幕寬度應用不同的樣式。當屏幕寬度小于等于768像素時，<div>元素的寬度將變為50%；當屏幕寬度小于等于480像素時，<div>元素的寬度將變為100%。

通過以上幾個案例，我們可以根據實際需要選擇不同的方法對<div>元素進行屏幕適配，以確保網頁內容在不同屏幕上呈現出最佳的效果。