Banner作為網站頁面的重要組成部分，是吸引用戶注意力的重要元素之一。然而，由于設備尺寸和分辨率的不同，往往導致Banner無法在不同終端上適配，影響用戶體驗。因此，在設計Banner時，需要使用CSS進行適配。

.banner {
width: 100%;
height: 50vw; /*根據屏幕寬度自適應高度*/
background-image: url("banner.jpg");
background-size: cover;
background-position: center;
}
@media screen and (min-width: 768px) {
.banner {
height: 30vw;
}
}
@media screen and (min-width: 1200px) {
.banner {
height: 20vw;
}
}

以上是一個簡單的Banner適配代碼示例，其中使用了媒體查詢，針對不同寬度的設備設置不同的Banner高度，實現適配。具體來說，當屏幕寬度小于768px時，Banner的高度為屏幕寬度的50%；當屏幕寬度在768px至1200px之間時，Banner的高度為屏幕寬度的30%；當屏幕寬度大于1200px時，Banner的高度為屏幕寬度的20%。這樣即可在不同設備上自適應顯示Banner，提高用戶體驗。