在設計響應式網站時，必須考慮屏幕的分辨率對于布局的影響。為了確保網頁在不同分辨率的屏幕上都能夠呈現出良好的效果，需要使用CSS來定義不同尺寸和分辨率的屏幕所應用的樣式。

為了創建響應式的布局，我們可以使用CSS媒體查詢來針對不同的屏幕尺寸和分辨率應用不同的樣式。

/* 添加針對不同屏幕尺寸應用的樣式 */
@media screen and (min-width: 768px) {
body {
font-size: 16px;
}
}
@media screen and (min-width: 992px) {
body {
font-size: 18px;
}
}
@media screen and (min-width: 1200px) {
body {
font-size: 20px;
}
}

在上述示例中，我們使用了三個不同的媒體查詢，分別對應了三種不同寬度的屏幕。在這些媒體查詢中，我們使用了min-width屬性來限制了應用這些樣式的最小屏幕寬度。

除了應用字體大小以外，我們還可以在不同的媒體查詢中應用其它的樣式，比如設置不同的圖像大小、改變文本樣式等等。

總的來說，使用CSS媒體查詢是創建響應式網站的關鍵步驟之一。通過針對不同的屏幕尺寸和分辨率的應用不同的樣式，我們可以確保網頁在不同的設備上都能夠呈現出最佳的效果。