CSS媒體查詢是調整網頁布局適應不同設備屏幕的重要技術之一。而rem單位則是可以根據根元素的字體大小進行動態縮放的單位。在移動設備不斷增多的今天，結合媒體查詢和rem單位可以非常方便地實現響應式布局。

具體來說，我們可以使用媒體查詢確定不同設備寬度下的樣式規則，同時使用rem進行長度和字體大小的調整。比如，我們可以在媒體查詢中使用max-width條件來判斷屏幕寬度是否小于等于某個閾值，然后為該條件下的元素設置rem單位的長度和字體大小。

@media (max-width: 768px) {
body {
font-size: 16px;
}
.container {
padding: 1rem;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
body {
font-size: 18px;
}
.container {
padding: 2rem;
}
}
@media (min-width: 1024px) {
body {
font-size: 20px;
}
.container {
padding: 3rem;
}
}

上面的代碼中，我們根據設備屏幕寬度分別設置了三個媒體查詢，分別針對小屏幕、中等屏幕和大屏幕。在每個媒體查詢中，我們設置了不同的字體大小和容器內邊距，而長度單位都是rem。

需要注意的是，rem單位是根據根元素的字體大小來計算的。因此，我們通常會在根元素（即html元素）上設置一個合適的字體大小。一般來說，我們可以先設置一個默認字體大小，然后在媒體查詢中對不同設備分別進行調整。例如：

html {
font-size: 16px;
}
@media (max-width: 768px) {
html {
font-size: 14px;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
html {
font-size: 16px;
}
}
@media (min-width: 1024px) {
html {
font-size: 18px;
}
}

最后需要提醒的是，在使用rem和媒體查詢進行響應式布局時，一定要考慮到所有可能的設備分辨率和屏幕尺寸，并且進行充分的測試和調試。只有在各種設備上都能夠正常顯示和使用的情況下，我們才能說這個布局是真正響應式的。