CSS自適應布局是網頁界面設計的必備技能之一。在不同的設備上，網頁需要自適應地調整布局，以保證用戶體驗的一致性和優良性。今天，我們將介紹一種通用的CSS自適應布局模板，幫助你快速搭建自適應網頁布局。

/*通用CSS自適應布局模板*/
/*重置樣式*/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
/*設置主體*/
body{
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
line-height:1.5;
background-color:#f9f9f9;
}
/*設置容器*/
.container{
width:90%;
margin:0 auto;
max-width:1200px;
}
/*設置網頁頭部*/
.header{
height:80px;
background-color:#333;
color:#fff;
text-align:center;
line-height:80px;
}
/*設置網頁內容區域*/
.content{
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:flex-start;
margin-top:20px;
}
/*設置網頁側邊欄*/
.sidebar{
width:25%;
margin-right:30px;
}
/*設置網頁主體*/
.main{
width:70%;
}
/*設置網頁底部*/
.footer{
height:50px;
background-color:#333;
color:#fff;
text-align:center;
line-height:50px;
margin-top:30px;
}

以上就是本文介紹的通用CSS自適應布局模板，你可以將其應用到任何一個網頁設計中。在使用過程中，你可以根據具體的需求，對模板進行調整和優化，以構建更適合用戶的自適應布局。