CSS自適應與流式布局是現(xiàn)代Web設計中非常重要的兩個概念，它們的目的是讓網頁能夠在不同的設備上以最佳的性能進行顯示。

CSS自適應是指網頁的布局和元素的大小能夠根據用戶使用的設備自動調整。這種布局方式不是固定的布局，而是更具彈性和適應性的布局方式。通過CSS media query和viewport設置，可以實現(xiàn)不同設備屏幕下的布局自動適應。

@media (max-width: 768px) {
/* 小屏幕下樣式設置 */
}
@media (min-width: 768px) and (max-width: 992px) {
/* 中等屏幕下樣式設置 */
}
@media (min-width: 992px) and (max-width: 1200px) {
/* 較大屏幕下樣式設置 */
}
@media (min-width: 1200px) {
/* 大屏幕下樣式設置 */
}

流式布局是指網頁的布局能夠根據用戶使用設備的屏幕尺寸和窗口大小自動調整。相比固定布局，流式布局的優(yōu)點在于更具有適應性，可以在不同屏幕大小下保持相對的比例和完整性。通過給HTML元素設置百分比的寬度和布局，可以實現(xiàn)簡單的流式布局。

/* HTML代碼 */
<div class="wrapper">
<div class="box">I am a box</div>
<div class="box">I am another box</div>
</div>
/* CSS代碼 */
.wrapper {
width: 90%; /* 寬度為瀏覽器窗口90% */
margin: 0 auto; /* 設置居中對齊 */
}
.box {
width: 50%; /* 寬度為父元素寬度的50% */
float: left;
padding: 20px;
}
.clearfix:after { /* 清除浮動 */
content: "";
display: table;
clear: both;
}

總而言之，CSS自適應和流式布局是現(xiàn)代Web設計中不可或缺的兩個概念，它們的目的都是讓網頁能夠根據不同設備屏幕的大小和使用習慣靈活自適應，從而為用戶提供更好的瀏覽和交互體驗。