在開始編寫 CSS 之前，我們需要先確定設計稿的大小，這將影響我們如何實現響應式設計。通常，設計稿的大小是以像素為單位的。

我們可以通過使用 CSS 的px單位來實現與設計稿尺寸相對應的布局。例如，如果設計稿的寬度為 1200px，我們可以將 CSS 根元素的字體大小設置為62.5%，并將頁面的寬度設置為120rem，其中1rem等于10px。這樣，我們就可以使用像素單位來定義元素的寬度和高度，并且它們將與設計稿尺寸相對應。

html {
font-size: 62.5%;
}
body {
width: 120rem;
margin: 0 auto;
}
.some-element {
width: 300px;
height: 200px;
}

然而，現在越來越多的網站采用了響應式設計，在不同的設備上顯示不同的布局。為了實現這一點，我們需要使用相對單位，如em和rem。這些單位基于元素的父元素或根元素的字體大小而定，因此會自動調整大小以適應不同屏幕尺寸。

例如，我們可以使用em單位來調整文本大小：

h1 {
font-size: 2em;
}
p {
font-size: 1.4em;
}

這表示標題元素的字體大小將是其父元素字體大小的 2 倍，而段落元素的字體大小將是其父元素字體大小的 1.4 倍。

總之，在編寫 CSS 之前，了解設計稿的大小非常重要。通過使用適當的單位來定義元素的寬度、高度和字體大小，可以確保網站在不同的設備上呈現出正確的布局。