CSS3在響應式設計中扮演著非常重要的角色。通過使用CSS3，我們可以創(chuàng)建靈活的響應式DIV，能夠根據(jù)不同設備的屏幕大小和分辨率進行調整。下面我們來看看如何使用CSS3創(chuàng)建響應式DIV。

/* 以下是簡單的CSS代碼 */
/* 在不同設備上設置不同的字體大小 */
@media screen and (max-width: 640px) {
div {
font-size: 14px;
}
}
@media screen and (min-width: 640px) and (max-width: 1024px) {
div {
font-size: 16px;
}
}
@media screen and (min-width: 1024px) {
div {
font-size: 18px;
}
}
/* 在不同設備上設置不同的顏色 */
@media screen and (max-width: 640px) {
div {
background-color: #f5f5f5;
}
}
@media screen and (min-width: 640px) and (max-width: 1024px) {
div {
background-color: #dedede;
}
}
@media screen and (min-width: 1024px) {
div {
background-color: #bfbfbf;
}
}

在上面的代碼中，我們使用了@media查詢，為不同的設備設置了不同的樣式規(guī)則。我們首先設置了字體大小，然后設置了背景顏色。這些規(guī)則會基于設備的屏幕大小進行觸發(fā)。

通過使用CSS3響應式DIV，我們可以創(chuàng)建出動態(tài)和靈活的頁面布局，更好地適應不同的設備和屏幕尺寸。這使得我們可以更容易地擴展和維護我們的網站，并為不同的用戶提供更好的體驗。