calc是什么
CSS3中新增的一个函数，calculate（计算）的缩写。用于动态计算宽/高。
calc()的用法
在顶部HTML标签中写入 font-size=‘100px’ 以及 body中写入正常字体大小 font-size=‘16px’ 最后在html样式中使用calc计算大小 （切记这是移动端大小适配！）在展示效果的时候请切换移动端。
<!DOCTYPE html>
<html lang="en" font-size='100px'>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style >
html {font-size: calc(100/375*100vw);}
.span{font-size: .16rem;}
.span1{font-size: 16px;}
</style>
</head>
<body font-size='16px'>
<div class="box">
<div class="res">
<span class="span">看小旭暗示法</span>
<span class="span1">看小旭暗示法</span>
</div>
</div>
</body>
</html>
效果展示
在 iPhone6/7/8 下展示的效果
在 iPhone 6/7/8 Plus 下展示的效果
上面两种机型的效果展示，就可以看出字体的大小发生了变化，不仅可以用于字体大小适配，还可以用于宽高等适配，下面诉说的就是适配高的效果展示。
.span{
font-size: .16rem;
display:inline-block;
width: 3.5rem;
height: 2rem;
}
在 iPhone 6/7/8 下展示的效果
在 iPhone 6/7/8 Plus 下展示的效果
在测试的时候可能会出现 span 标签上面有空出的高度，只需要在span 标签的样式中将 display:inline-block;，修改成 “display:block;
觉得可以入眼点个赞吧。