CSS的DIV是Web開發中最為基礎的建設單元之一，它們能夠幫助開發者實現各種布局。

隨著移動設備的普及，Web設計需要實現響應式布局，以確保頁面能夠在不同尺寸的屏幕上得到合適地呈現。在這種情況下，使用CSS DIV來實現響應式設計成為了一種流行的方式。

下面的代碼展示了如何使用CSS DIV來實現響應式的布局。

.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.box {
width: 100%;
height: 300px;
background-color: #ccc;
box-sizing: border-box;
padding: 10px;
}
@media screen and (min-width: 768px) {
.box {
float: left;
width: 50%;
}
}
@media screen and (min-width: 992px) {
.box {
width: 33.33%;
}
}

在這個例子中，.container被設置成占據整個可用寬度，并在最大寬度為1200像素時進行居中。.box被用來表示一個響應式元素，并帶有一個響應式的樣式規則，其在媒體查詢條件下被應用。

在上面的例子中，如果屏幕的寬度大于或等于768像素，則.box元素會漂浮在頁面的左側，并被設置為50%的寬度。如果屏幕的寬度大于或等于992像素，則.box元素的寬度會被設置為33.33%。

通過這種方式，開發者可以根據顯示器的大小和分辨率來調整布局。這使得網站在移動設備上的獲得更好的體驗，同時也滿足了大型顯示器上的布局需求。