移动端纯css设置高度自适应

适用情景

在设置移动端单页面背景颜色或设置相对屏幕上下居中的元素时，会需要根据屏幕高度来实现自适应。

示例

原页面：

<div class="page">
    <div class="box">
    </div>
  </div>

.page{
  .box{
    width: 100px;
    height: 100px;
    background-color: #f5ec6c;
  }
 }

用css完成填充背景和文字水平、垂直居中

.page{
  width: 100vw;;
  height: 100vh;
  background-color: #DDF5FF;
  .box{
    width: 100px;
    height: 100px;
    background-color: #f5ec6c;
    position:relative;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
 }

效果图：

拓展

可以使用calc()对长度进行计算，calc()函数支持 “+”, “-”, “*”, “/” 运算
需要注意的是：运算符前后都需要保留一个空格。例：height: calc(100vh - 10px)；