rem 布局

rem

计量单位

单位	描述
px	(最终呈现)
em	(相对父元素)
rem	(相对根元素)
%	(相对父元素)
vw	(1vw=1% vieport width)
vh	(1vh=1% vieport height)

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!--    viewport 视口 默认视口980px,苹果最早提出
            -width 宽度 使用设备宽度device-width
            -height 高度 一般不设置
            initial 初始缩放比
            minmum-scale 初始缩放
            maxmun    
    -->
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  body {
    font-size: 20px;
  }
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.5rem;
  }
</style>
<body>
  <!-- 1em==父元素的字体大小 font-size
    em 是一个相对定位 -->
  <!-- 1rem (root+em) -->
  <!-- 
  1.和reset的fontsize 
  2.rem和em 
  3.rem和px 
  -->
  <div class="baba">
    <h1>标题1标题1标题1标题1标题1标题1标题1标题1</h1>
    div容器
    <p>标题2</p>
  </div>
</body>

移动端rem脚本,使用它请把下面代码放入自己项目的 <script></script> 标签或js文件中

document.body.style.height = window.innerHeight + "px";

/*动态改变根元素字体大小*/
function recalc() {
  // 获取客户端宽度
  var clientWidth = document.documentElement.clientWidth;
  if (!clientWidth) return;
  // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
  document.documentElement.style.fontSize = 100 * (clientWidth / 750) + "px";
}

function initRecalc() {
  recalc();
  // if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
  var resizeEvt =
    "osrientationchange" in window ? "orientationchange" : "resize";
  if (!document.addEventListener) return;
  window.addEventListener(resizeEvt, recalc, false);
  document.addEventListener("DOMContentLoaded", recalc, false);
}
initRecalc();

# rem 布局

# rem

# 计量单位

rem 布局

rem

计量单位