在網頁設計中，我們經常需要添加一個頁面的底部模塊，即頁腳。然而，不同的屏幕大小和設備導致不同的顯示效果。因此，我們需要使用CSS來實現頁腳的自適應。

.footer {
position: absolute; /*將頁腳固定在頁面底部*/
bottom: 0; /*設置距離頁面底部為0*/
width: 100%; /*設置寬度為100%，即鋪滿整個頁面*/
height: 50px; /*設置高度*/
background: #333; /*設置背景顏色*/
color: #fff; /*設置文字顏色*/
text-align: center; /*設置文本對齊方式*/
}

我們可以看到，在以上代碼中，我們使用了絕對定位將頁腳固定在頁面底部，然后設置了寬度、高度、背景顏色、文字顏色和文本對齊方式等樣式。這樣，在不同的設備和屏幕大小下，頁面底部會自適應調整。

在實際開發中，我們還可以添加一些其他的樣式來美化頁腳，如添加陰影效果、加入鏈接等等。總的來說，頁腳的自適應可以讓我們的網頁更加美觀、易于閱讀，提升了用戶體驗。