隨著移動互聯網的普及，越來越多的網站需要進行屏幕適配以適應不同設備屏幕的大小和分辨率。而CSS作為頁面的樣式語言，為我們提供了多種屏幕適配的方式。

響應式布局：
@media screen and (max-width: 768px) {
/* 樣式代碼 */
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
/* 樣式代碼 */
}
@media screen and (min-width: 1201px) {
/* 樣式代碼 */
}

響應式布局是目前最為流行的屏幕適配方式之一。通過設置不同的media query，我們可以為不同的屏幕大小和分辨率提供不同的CSS樣式。根據屏幕寬度可以分為移動端、平板和PC端三種情況，分別設置不同的樣式。

彈性布局：
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 200px;
}

彈性布局是CSS3新增的一種布局方式。通過設置display屬性為flex，我們可以實現靈活的布局。通過設置flex屬性，可以控制子元素在主軸和交叉軸上的尺寸比例。彈性布局可以更好地適應不同的屏幕大小和分辨率。

移動優先布局：
.container {
width: 100%;
}
.item {
width: 100%;
}
@media screen and (min-width: 768px) {
.container {
width: 768px;
}
.item {
width: 48%;
}
}

移動優先布局是指首先考慮移動端的布局，然后再逐漸添加PC端的布局。通過設置元素的寬度為百分比或rem單位，可以實現相對于父元素的自適應布局。在PC端時，通過媒體查詢設置元素寬度為固定值，以適應更大的屏幕。

總的來說，CSS提供了多種屏幕適配的方式，我們可以根據實際情況選擇最適合的方式。通過合理的屏幕適配，可以提升用戶的體驗，使網站更加友好和易用。