隨著移動互聯網的普及，越來越多的網站開始重視移動端的用戶體驗。其中一個重要的方面就是網站彈框的自適應。這里我們介紹一種使用CSS實現彈框自適應的方法。

首先，我們創建一個基礎的彈框結構：

<div class="popup">
<div class="popup-content">
<p>這里是彈框的內容</p>
</div>
</div>

接著，我們使用CSS來通過媒體查詢設置不同屏幕大小下的彈框寬度和高度。

/* 彈框樣式 */
.popup {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, .5);
z-index: 1000;
}
/* 內容區域樣式 */
.popup-content {
width: 80%;
max-width: 600px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
}
/* 大屏幕 */
@media (min-width: 992px) {
.popup-content {
height: 80%;
}
}
/* 中等屏幕 */
@media (max-width: 991.98px) and (min-width: 768px) {
.popup-content {
height: 90%;
}
}
/* 小屏幕 */
@media (max-width: 767.98px) {
.popup-content {
height: 95%;
width: 95%;
}
}

在上述代碼中，我們使用了彈性盒子布局和定位來實現彈框在頁面中央的效果。接著，我們通過設置內容區域的寬度和媒體查詢來計算出不同屏幕大小的彈框高度。

這樣，無論用戶是在大屏幕、中等屏幕還是小屏幕下使用，都可以得到一個合適的彈框高度。