div 自適應代碼是一種在網頁設計中常用的技巧，它能夠使元素根據瀏覽器窗口大小的變化自動調整大小和位置，以適應不同設備的屏幕尺寸。這種技術特別適用于響應式設計，能夠確保網頁在不同設備上都能夠呈現良好的顯示效果。
下面我們將詳細討論幾個div 自適應代碼案例，以幫助初學者更好理解和應用這種技術。
第一個案例是創建一個自動居中的div。假設我們想要在網頁上創建一個居中的容器，我們可以使用以下代碼來實現：

/* CSS代碼 */
.container {
width: 50%;
margin: 0 auto;
background-color: #f2f2f2;
}

在這個案例中，我們定義了一個寬度為50%的容器，并將左右邊距設為自動。這將使得容器在水平方向上居中顯示。通過設置背景顏色，我們可以更清晰地看到容器的效果。

第二個案例是創建一個自適應網格布局。我們經常會在網頁設計中使用網格布局來排列頁面元素。下面的代碼演示了如何創建一個自適應的網格布局：

/* CSS代碼 */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}

在這個案例中，我們定義了一個grid容器，并使用<span style="font-weight: bold;">repeat(auto-fit, minmax(200px, 1fr))</span>來指定網格列的數量和寬度。這將使得網格布局能夠自適應容器的大小，并且每個網格的最小寬度為200px。通過設置grid-gap屬性，我們可以為網格之間添加間距。

第三個案例是創建一個固定比例的div。有時候，在頁面設計中需要設置一個固定比例的容器，無論瀏覽器窗口如何變化，容器的寬高比例始終保持不變。下面的代碼演示了如何創建一個固定比例的div：

/* CSS代碼 */
.container {
position: relative;
width: 100%;
padding-top: 56.25%;
background-color: #f2f2f2;
}
<br>
.container:before {
content: "";
display: block;
padding-top: 100%;
}
<br>
.inner-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
}

在這個案例中，我們創建了一個容器，并使用padding-top屬性來設置容器的高度。通過設置padding-top的值為56.25%，我們可以保持容器的寬高比例為16:9。接下來，我們使用:before偽元素創建一個占位符，以確保容器在沒有內容時也能夠正確顯示。最后，我們創建了一個.inner-content子元素，它的position屬性設為absolute，使其相對于父元素進行定位。通過設置相應的top、left、right和bottom屬性，我們可以使.inner-content填滿整個容器。

通過以上的代碼案例，我們可以看到div 自適應代碼在實際開發中的應用。這些例子僅僅是拋磚引玉，你可以根據實際項目需求進行調整和擴展。希望以上內容對今后的網頁設計工作有所幫助。