CSS是網頁設計中一個非常重要的技術，它允許你通過樣式表來控制網頁的外觀和布局。在現代網頁設計中，自適應設計越來越受歡迎。自適應設計就是讓網頁可以根據不同的瀏覽器窗口大小自動調整布局，使頁面看起來更加美觀和容易使用。

/* 以下是CSS代碼實現頁面自適應長度 */
body {
font-size: 16px; /* 設置網頁默認字體大小 */
line-height: 1.5; /* 設置行高 */
padding: 0;
margin: 0; /* 去除默認間距 */
}
.container {
max-width: 960px;
margin: 0 auto; /* 設置容器居中對齊 */
padding: 0 15px; /* 設置容器與瀏覽器邊緣的距離 */
}
.main {
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* 設置子元素的布局方式 */
}
.item {
flex-basis: 24%;
margin-bottom: 30px; /* 設置子元素的寬度和間距 */
}
@media (max-width: 768px) {
.item {
flex-basis: 48%; /* 在窄屏幕上，將子元素的寬度改為 48% */
}
}
@media (max-width: 480px) {
.item {
flex-basis: 100%; /* 在更窄的屏幕上，將子元素的寬度改為 100% */
}
}

可以看到，這段CSS代碼中使用了一些通用的布局技巧，比如設置容器的最大寬度和居中對齊，以及使用Flexbox布局來自動調整子元素的位置和大小。同時，我們也使用了CSS媒體查詢來在不同的屏幕尺寸下修改布局。

通過這些技巧，我們可以很容易地實現頁面的自適應長度，讓用戶在不同的設備上都能夠獲得更好的訪問體驗。