CSS自適應搜索框是前端設計中比較實用的一種組件。在移動端或者不同分辨率的屏幕上，可以自動適配不同的寬度和高度，方便用戶使用。以下是一種簡單的實現方式。

<div class="search-container">
<input type="text" placeholder="Search">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
.search-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
input[type=text] {
padding: 12px;
border: none;
width: 80%;
font-size:16px;
}
button[type=submit] {
border: none;
background: #000;
color: #fff;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
@media screen and (max-width: 600px) {
input[type=text] {
width: 60%;
}
}

在上述代碼中，我們首先創建了一個搜索框的容器search-container，使用flex布局，使其水平和垂直居中，占據了整個頁面。在容器中，我們添加了一個文本框和一個搜索按鈕。文本框使用input元素，可以顯示用戶的輸入內容，而搜索按鈕使用button元素，通過點擊觸發搜索操作。為了美觀和易用性，我們為文本框和按鈕都添加了一些樣式，如字體大小、背景色和邊框等。

接下來是關鍵部分，使用媒體查詢@media，檢測屏幕的寬度，并根據不同的條件調整樣式。在這里我們針對600px以內的移動端屏幕，將文本框的寬度縮小至60%，使其不會占據太多的空間，方便用戶輸入。

總之，CSS自適應搜索框可以提高用戶輸入的效率和體驗，可以通過不同的樣式組合，實現多種不同風格的搜索框。需要注意的是，媒體查詢不同的條件和css的選擇器相結合，可以更加靈活的設計自適應組件。