隨著移動設備的普及，越來越多的網站使用響應式設計，以適應不同屏幕尺寸的設備。在小屏幕上，輸入框通常會縮小，以節省空間。CSS提供了幾種方法來實現輸入框縮近的效果。

<input type="text" class="smaller-input" placeholder="Username">

第一種方法是使用CSS的width屬性。通過將width設置為一個較小的值，可以使輸入框縮小。例如：

input.smaller-input {
width: 50%;
}

這將使輸入框的寬度減半。如果只需要縮小某些輸入框，可以使用class選擇器。

第二種方法是使用rem單位。rem是相對于根元素大小的單位，因此可以在不同分辨率的屏幕上自適應。例如：

input {
width: 8rem;
}

這將使輸入框的寬度為8個根元素的大小。

第三種方法是使用CSS的彈性盒子模型（Flexbox）。Flexbox是一個強大的布局模型，可以輕松實現輸入框縮近的效果。例如：

.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
flex-basis: 50%;
}

這將創建一個父容器，其中包含兩個子容器，每個子容器占據父容器的50%寬度。

無論使用哪種方法，都應該在不同屏幕尺寸上對輸入框進行測試，確保它們在任何設備上都可以正常工作。