現在越來越多的網站都需要兼顧不同大小的設備，因此，CSS自適應布局成為了網頁設計中的一項重要技術。

CSS自適應布局的原理是根據設備的屏幕大小來調整網頁的樣式和布局，以達到最佳的瀏覽效果。如果你想要實現CSS自適應布局，下面提供一個通用的模版。

/* HTML樣式 */
html {
font-size: 100%; /* 設置body的字體大小為16px */
}
@media screen and (max-width: 768px) {
html {
font-size: 90%; /* 設置body的字體大小為14px */
}
}
/* body樣式 */
body {
font-family: sans-serif; /* 設置字體 */
font-size: 1rem; /* 設置字體大小 */
line-height: 1.5; /* 設置行高 */
color: #333; /* 設置字體顏色 */
background-color: #fff; /* 設置背景色 */
margin: 0; /* 去掉body默認外邊距 */
}
/* 容器樣式 */
.container {
max-width: 1200px; /* 設置寬度不超過1200px */
margin: 0 auto; /* 居中 */
padding: 0 15px; /* 左右留白 */
}
/* 柵格系統樣式 */
.row {
display: flex; /* 使用flex布局 */
flex-wrap: wrap; /* 換行 */
margin: 0 -15px; /* 左右留白 */
}
.col {
flex-grow: 1; /* 子元素等分 */
margin: 0 15px; /* 左右留白 */
}
@media screen and (min-width: 768px) {
.col-sm {
flex-basis: calc(100% / 12 * 4); /* 設置柵格寬度 */
}
}
/* 圖片樣式 */
img {
max-width: 100%; /* 圖片寬度不超過容器 */
height: auto; /* 根據寬度自適應高度 */
}

以上是一個通用的CSS自適應布局模版，根據不同的需求和設計風格，可以進行適當地修改。希望能對你在網頁設計中實現CSS自適應布局有所幫助。