CSS設計適應屏幕大小是響應式設計的重要組成部分，響應式設計的目標是使網站可以自適應各種不同大小的屏幕和設備，并提供一致的用戶體驗。在CSS中，通過設置media query來實現響應式設計。

/* 設置屏幕尺寸的下限為768px */
@media screen and (min-width: 768px) {
/* 在此處添加適用于大屏幕的CSS屬性 */
}
/* 設置屏幕尺寸的上限為767px */
@media screen and (max-width: 767px) {
/* 在此處添加適用于小屏幕的CSS屬性 */
}

當屏幕的寬度小于768px時，將應用第二個media query，并使頁面響應式地縮小。這可以通過響應式設計的其他方法結合使用，如流體布局和可縮放的圖像。

為了確保響應式設計正常工作，必須使用相對于視口寬度的單位來設置字體大小和元素大小。例如：

h1 {
font-size: 4vw; /* 字體大小基于視口寬度的百分比 */
margin-top: 4vh; /* 元素上邊距基于視口高度的百分比 */
}

使用這些單位可以確保頁面的字體和元素在不同的設備和屏幕尺寸下保持一致，從而為用戶提供一致的體驗。

在CSS中實現響應式設計需要一些實踐和經驗，但通過使用media queries和相對單位，可以輕松地創建適應不同屏幕尺寸的CSS。