當我們創建網站或應用程序時，我們通常希望頁面的設計能夠適應不同尺寸的瀏覽器窗口。這就需要運用層疊樣式表（CSS）來適應瀏覽器寬度。

在 CSS 中，我們可以使用百分比或 em 單位來定義寬度、高度和邊距等屬性。這些單位可以幫助我們在不同尺寸的屏幕上實現頁面的響應式設計。

例如，下面是一個簡單的 CSS 代碼段，將某個 div 元素的寬度設置為瀏覽器窗口寬度的 50%：

div {
width: 50%;
}

這個代碼段允許 div 元素的寬度在不同尺寸的設備上自動調整，使其適應不同大小的瀏覽器窗口。

當然，只使用百分比或 em 單位并不能完全實現響應式設計。在某些情況下，我們可能需要使用 CSS 媒體查詢來定義不同的樣式規則，以適應不同的設備屏幕大小。例如：

@media screen and (max-width: 768px) {
/* 在小屏幕設備上的樣式規則 */
}
@media screen and (min-width: 769px) {
/* 在大屏幕設備上的樣式規則 */
}

在這個例子中，當瀏覽器窗口大小小于等于 768 像素時，第一個媒體查詢將應用相應的樣式規則。當瀏覽器窗口大小大于等于 769 像素時，第二個媒體查詢將應用相應的樣式規則。這個代碼段可以使我們更好地控制頁面在不同設備上的呈現效果。

總之，響應式設計是現代網站和應用程序中最重要的設計原則之一。通過合理地使用 CSS 百分比和 em 單位，以及 CSS 媒體查詢，我們可以輕松地實現頁面的響應式設計，提高用戶體驗，同時減少不必要的代碼量。