CSS中的rem是指相對于根元素字體大小的單位。使用rem單位可以使網(wǎng)頁在不同設(shè)備上的布局更加靈活和適配性更強(qiáng)。

html{
font-size: 10px; /*假設(shè)根元素字體大小為10px*/
}
p{
font-size: 2rem; /*相當(dāng)于20px*/
}

但是，在不同設(shè)備上，根元素的字體大小會不同，這會影響rem單位的實(shí)際大小。我們可以通過兩種方法來解決這個問題。

第一種方法是使用媒體查詢來根據(jù)不同的屏幕寬度設(shè)置不同的根元素字體大小。

@media screen and (max-width: 768px){
html{
font-size: 12px;
}
}
@media screen and (max-width: 1024px){
html{
font-size: 14px;
}
}
/*根據(jù)屏幕寬度變化設(shè)置不同的根元素字體大小*/

第二種方法是使用JS來動態(tài)設(shè)置根元素字體大小。通過監(jiān)聽窗口大小變化事件，可以根據(jù)不同的窗口寬度設(shè)置不同的根元素字體大小。

window.onresize = function(){
var screenWidth = window.innerWidth;
var fontSize = screenWidth / 100; /*假設(shè)每100像素對應(yīng)1rem大小*/
document.documentElement.style.fontSize = fontSize + 'px';
};
/*根據(jù)窗口大小動態(tài)設(shè)置根元素字體大小*/

通過以上兩種方法，我們可以更加靈活和方便地使用rem單位進(jìn)行網(wǎng)頁布局的適配。