在web應用程序中，我們常常需要使用CSS來控制頁面的呈現。而當頁面的尺寸發生變化時，我們需要將樣式與頁面的大小相匹配。這時，CSS的一個特性——響應式設計，就派上用場了。通過使用響應式CSS，我們可以輕松地進行頁面布局，以便在不同設備上以最佳的方式顯示內容。

CSS中的單位有很多種，其中百分比單位是一種非常實用的單位。它可以讓我們根據屏幕尺寸動態地調整元素的大小和位置。比如，在以下代碼中，我們定義了一個使用百分比單位的寬度：

.box {
width: 50%;
}

當在較小的屏幕上查看該頁面時，該元素的寬度將會自動減小，以適應屏幕尺寸。而當在更大的屏幕上查看頁面時，該元素的寬度將自動增加，以充分利用屏幕空間。

但是，有時候我們需要更精確地控制元素在頁面上的大小和位置，這時候我們可以使用CSS3中的calc()函數。該函數可以讓我們在使用像素單位的同時，還可以根據百分比值進行計算。舉個例子：

.box {
width: calc(50% - 20px);
height: calc(100% - 40px);
}

在這個例子中，我們定義了一個固定的寬度為20px和高度為40px的元素大小，然后用百分比單位的值進行計算，實現了對元素大小的精細控制。

除了百分比單位和calc()函數，CSS還有一些其他的單位和功能可以幫助我們實現響應式設計。例如，使用媒體查詢可以讓我們針對不同設備的屏幕尺寸定義不同的CSS規則。此外，CSS還提供了一些flexbox和grid布局技術，可以讓我們更輕松地進行頁面布局。

總之，CSS是一個非常強大和靈活的工具，可以幫助我們實現各種各樣的效果。通過使用響應式設計和合適的CSS單位和功能，我們可以輕松地構建跨設備的高質量網站和應用程序。