CSS實現頁面自動大小功能是前端開發中十分重要的一項技能。通過這種技能，開發者能夠在不同屏幕大小的設備上達到更好的頁面效果。

下面是一段示例代碼，展示如何使用CSS來實現頁面自動大小的功能：

body {
font-size: 16px;
max-width: 1200px;
margin: 0 auto;
}
.container {
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: calc(33.33% - 20px);
margin-bottom: 20px;
border: 1px solid #ccc;
box-sizing: border-box;
}

這段代碼中，我們首先在body元素中定義了最大寬度和居中的樣式。然后在.container元素中，我們使用了彈性布局的display和flex-wrap屬性，讓子項能夠自動換行并且均勻分布。在.item元素中，我們又定義了每個子項所占的寬度和外邊距，讓它們在不同的屏幕寬度下都能夠適應屏幕。

總的來說，通過CSS的樣式定義和彈性布局的運用，我們可以在不同屏幕大小的設備上自適應顯示內容。這是前端開發中必不可少的技能，也是我們在實際開發中必須掌握的一項技能。