CSS中的rem是相對長度單位，它是相對于根元素（html）字體大小的倍數，可以有效地幫助我們實現響應式布局。

html{
font-size: 16px;
}
body{
font-size: 1rem;
}
h1{
font-size: 2rem;
}

上面的代碼中，我們將html的字體大小設為16px，body的字體大小設為1rem，這意味著body的字體大小將等于html的字體大小，即16px。而h1的字體大小被設置為2rem，它將相對于html的字體大小（16px）乘以2倍，也就是32px。

使用rem單位可以很方便地實現響應式布局。在響應式布局中，我們通常希望元素的大小和間距能夠隨著屏幕尺寸的變化而自適應。使用rem單位可以讓我們避免在不同的媒體查詢中多次寫相同的大小和間距，從而簡化代碼。

需要注意的是，rem單位會受到根元素字體大小的影響。如果我們希望在不同的媒體查詢中使用不同的根元素字體大小，或者在不同的頁面中使用不同的根元素字體大小，應該使用JavaScript動態設置根元素字體大小。

function setHtmlFontSize(){
const screenWidth = document.documentElement.clientWidth;
const html = document.documentElement;
const baseFontSize = 16;
const maxFontSize = 18;
const minFontSize = 14;
const fontSize = screenWidth / 375 * baseFontSize;
html.style.fontSize = fontSize >maxFontSize ? maxFontSize + 'px' : (fontSize< minFontSize ? minFontSize + 'px' : fontSize + 'px');
}
window.addEventListener('resize', setHtmlFontSize);
setHtmlFontSize();

上面的代碼中，我們使用JavaScript根據屏幕寬度動態計算根元素字體大小，從而實現響應式布局。我們通過監聽resize事件，在窗口大小發生變化時重新計算根元素字體大小。