HTML自適應CSS布局是一種流行的設計模式，能夠使網站適應不同尺寸的屏幕和設備。它是為了解決因設備屏幕大小不同而導致的布局錯亂而產生的。

@media screen and (max-width: 600px){
.container{
width: 100%;
display: flex;
flex-direction: column;
}
.item{
width: 100%;
margin-bottom: 20px;
}
}

以上是一個簡單的示例，使用@media規則進行樣式設置。當屏幕寬度小于600px時，.container元素將被設置為整個屏幕寬度，并使用flex布局垂直排列元素。.item元素也將變為全屏寬，并添加一定的底部邊距。這樣就可以確保在小屏幕上正確地顯示布局。

除了媒體查詢外，flex布局也是實現自適應布局的好方法。使用它可以使元素自動適應屏幕大小，并且兼容各種設備。原則上，在設計網站布局時應該始終考慮靈活性和響應性，保持網站可訪問性和可用性，以確保用戶在任何屏幕上都有良好的體驗。