隨著移動設備的普及，CSS針對不同種類的屏幕提供了三種方式：響應式設計、自適應設計和流動設計。每種方式都有其獨特的特點和適用場景。

響應式設計

@media screen and (max-width: 768px) {
.column {
width: 100%;
}
}

響應式設計是最流行的屏幕適配方式，它使用媒體查詢來根據屏幕寬度調整CSS樣式。這種方式在一開始開發時就為不同尺寸的屏幕考慮，可以在桌面、平板電腦和手機上提供一致的用戶體驗。

自適應設計

body {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

自適應設計基于固定的尺寸，但可以在不同的媒體查詢中使用不同的CSS樣式。該方式通過設置一個最大寬度值來適應不同尺寸的屏幕，頁面內容的布局會隨著屏幕寬度的變化而適應。

流動設計

.page-wrap {
width: 70%;
margin: 0 auto;
}

流動設計是根據瀏覽器窗口大小來調整頁面布局的方式。這是一種比較基礎和簡單的設計方式，但不夠靈活。當瀏覽器窗口縮小或擴大時，頁面將自動縮放以適應屏幕寬度。

以上三種設計方式都可用于創建具有不同屏幕分辨率的響應式頁面。您可以根據自己的需要選擇最適合您的設計方式，以提高用戶體驗。