4、单位 px,em,rem,vw,vh

2-1 px 绝对单位

实际上就是像素，用px设置字体时，比较稳定和精确

2-2 em 相对单位

相对于父元素的font-size(了解) 如果自身有font-size就相对于自身

2-3 rem (root em)

相对于根元素(html)的font-size来对应大小  1rem = html.fontSize

html {
  font-size: 20px;
}
div {
  width: 2rem;   /*  40px */
  height: 2rem;
  background-color: red;
}

移动端适配

<script>
  // 10rem
  var html = document.getElementsByTagName('html')[0]
  window.onresize = function(){
    var width = document.documentElement.clientWidth
    var rem = width/10 +'px'
    html.style.fontSize = rem
  }
</script>

插件

设置

在此输入屏幕尺寸（750px就输入75）

2-4 vw 可视区域的宽度 vh 可视区域的高度

.parent{
  width: 50vw;
  height: 50vh;
  background: red;
}
<div class="parent">
</div>

• vw vh 练习

*{
  margin: 0;
  padding: 0;
}
div{
  box-sizing: border-box;
}
.parent{
  display: grid;
  grid-template-columns: repeat(5,20vw);
  grid-template-rows: repeat(2,20vw);
}
.child{
  border: 1px solid #333;
}
<div class="parent">
  <div class="child"></div>
</div>