在如今的Web開發(fā)中，屏幕自適應(yīng)已成為一個(gè)必不可少的特性。當(dāng)我們?yōu)g覽網(wǎng)頁時(shí)，頁面必須能夠自動(dòng)地適應(yīng)各種不同的設(shè)備和屏幕尺寸來顯示內(nèi)容，提供更好的用戶體驗(yàn)，這就需要使用CSS來實(shí)現(xiàn)屏幕自適應(yīng)。

CSS中，我們可以通過使用百分比（%）來設(shè)置元素的寬度和高度，這樣元素就能夠根據(jù)屏幕大小自動(dòng)進(jìn)行縮放。我們還可以使用max-width和min-width屬性來設(shè)置元素的最大和最小寬度，以確保在大屏幕上不會(huì)顯得太小，在小屏幕上不會(huì)溢出。

.box {
width: 80%;
min-width: 320px;
max-width: 1200px;
}

在該例子中，元素的寬度設(shè)置為占屏幕寬度的80%，最小寬度為320px，最大寬度為1200px。這樣，無論在何種分辨率下，元素都能夠得到適當(dāng)?shù)恼故尽?/p>

除了寬度以外，CSS還能夠?qū)崿F(xiàn)其他屏幕自適應(yīng)功能。比如，我們可以使用@media查詢來定義不同的樣式規(guī)則，根據(jù)不同的屏幕分辨率來應(yīng)用這些規(guī)則。

@media screen and (max-width: 768px) {
/* 移動(dòng)設(shè)備樣式 */
.box {
width: 100%;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
/* 平板設(shè)備樣式 */
.box {
width: 50%;
}
}
@media screen and (min-width: 1025px) {
/* PC設(shè)備樣式 */
.box {
width: 30%;
}
}

在該例子中，我們定義了3組@media查詢，為不同屏幕大小設(shè)置了不同的.box元素寬度。當(dāng)屏幕尺寸小于等于768px時(shí)，元素寬度設(shè)置為100%；當(dāng)屏幕尺寸在769px到1024px之間時(shí)，寬度設(shè)置為50%；當(dāng)屏幕尺寸大于等于1025px時(shí)，寬度設(shè)置為30%。這樣，用戶可以在不同尺寸的設(shè)備上享受到不同的頁面展示效果。

總的來說，CSS中的屏幕自適應(yīng)功能可以幫助我們?cè)诟鞣N不同的設(shè)備和屏幕尺寸下提供最佳的用戶體驗(yàn)。