在現代的網站開發中，響應式設計已經成為了一種必要的技能。其中一個重要的組成部分就是使用

<div>

標簽來劃分網站的頁面結構。

<div>

標簽本身并沒有任何樣式，但它實際上是一個非常強大的標簽。通過給它添加 CSS 樣式，我們可以控制其樣式、大小、位置等等。

在響應式設計中，我們通常會使用

.container

類來為主要的頁面內容添加包裹層。通過這個類，我們可以實現頁面內容在不同屏幕大小下的自適應調整。

.container {
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
}

這段 CSS 代碼設置了一個最大寬度為 960 像素的容器，并通過

margin: 0 auto;

實現了居中對齊的效果。

但是，在不同屏幕大小下，該頁面元素的大小并不會自動調整。因此，我們還需要在 CSS 中加入媒體查詢，以實現響應式設計。

@media screen and (max-width: 767px) {
.container {
max-width: 100%;
padding: 0 15px;
}
}

這段

@media

查詢設置了在屏幕最大寬度為 767 像素時，容器的最大寬度為 100%，并將左右邊距調整為 15 像素。

通過這些

<div>

標簽和 CSS 樣式，我們可以為網站創建一個強大的、適應各種屏幕大小的基礎結構，讓其在各種設備上都能展現出良好的用戶體驗。