在進行網頁設計時，我們經常會使用CSS來控制頁面的樣式，包括頁面元素的大小和位置等。然而，如果你曾經嘗試過將一個頁面縮小到較小的窗口或在移動設備上查看網頁，你可能會遇到一個問題：即使頁面已經縮小了，元素的大小仍然保持不變。

例如，我們可能設置一個網頁中的圖片寬度為500像素。在正常大小的窗口下，這個設置可能看起來非常好。然而，如果你縮小窗口或在手機上查看這個頁面，你會發現這個圖片的寬度保持不變，導致圖片超出屏幕邊界，可能需要橫向滾動來查看完整的圖像。

這種情況的根本原因是我們使用了固定寬度來定義頁面元素，而不是使用相對單位。如果我們使用相對單位，例如百分比或em，頁面元素會根據視口（viewport）的大小自動調整大小。

接著上面的例子，如果我們將圖片的寬度設置為50％，那么無論你的窗口有多大，圖片的寬度都將自動縮放以適合于視口大小。這樣，我們就可以輕松地讓我們的網頁在任何設備上都具有良好的可讀性和易用性。

在設計響應式布局時，使用相對單位是非常重要的。我們應該盡可能使用em、rem、百分比等單位來定義頁面元素的大小和位置，避免固定值的使用，因為固定值的頁面元素無法適應不同的視口大小。

總的來說，記住使用相對單位，是一個好的網頁設計習慣，這樣我們的網頁在不同的設備上都能得到良好的展示，提高用戶體驗。