REM 使用方法

📆 2021-12-16 18:44

REM 与 EM

Root EM 就是 REM

跟 EM 相对于父节点不同，REM 相对于根节点

使用方法

设置根节点的字体大小

window.onload=function(){
  var rem=document.documentElement.clientWidth*100/1920;// 1920 是设计图的尺寸
  document.documentElement.style.fontSize=rem+'px';
}

设置完成后就可以使用了

body{font-size: 0.2rem;}/* 设计图中字体大小为 20px 写作 0.2rem */
.page{padding-top: 0.35rem;} /* 设计图中上填充为 35px 写作 0.35rem */
#side_bar{margin-left: 1.1rem;} /* 设计图中左间距为 110px 写作 1.1rem */