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%。

通过这种方式，开发者可以根据显示器的大小和分辨率来调整布局。这使得网站在移动设备上的获得更好的体验，同时也满足了大型显示器上的布局需求。