移动端vh适配短屏幕手机，兼容一屏显示问题
rem适配
在日常的移动端开发中，设计稿一般为750物理像素，而我平时开发的时候，习惯以屏幕宽度为375，高度为724为标准( iPhone X 在微信内置浏览器的宽高) ，如下图所示：
该页面是使用 rem 进行适配，此时该图片宽度为 533px，正常我们需要设置其宽度为5.33rem ，当屏幕高度为724时，可以正常一屏显示完全。
<body>
<div class="content">其他内容</div>
<img class="pic" src="./images/1.png" />
</body>
* {
margin: 0;
padding: 0;
}
body {
background-color: skyblue;
}
.content {
margin-top: 8rem
}
.pic {
width: 5.33rem;
}
短屏手机显示
而当我模拟短屏幕手机进行预览时，设置屏幕高度为667，此时屏幕宽度没有变化，那么根元素 html 的 font-size 也不会发生变化，那么造成的结果就是短屏幕手机上会出现滚动条，无法一屏显示。
但是需求是要求内容一屏能显示完全，此时 rem 适配已经没法做到了，在屏幕宽度不变，但是高度变化的情况下，这该怎么进行适配呢？
没错，这里我想到的是 vh 单位，不使用百分比是因为百分比适配是根据父级的宽高进行计算，而 vh 是根据整个屏幕的高度进行计算。
修改 css 如下所示：
.content {
margin-top: 55.249vh;
/* margin-top: 8rem; */
}
.pic {
/* width: 5.33rem; */
width: auto;
height: 28.66vh;
max-height: 4.15rem;
}
vh高度适配
利用 vh 对高度进行适配，但是这个 55.249vh 和 28.66vh 是如何这算出来的呢？
首先我是基于 375*724 进行布局，在724的高度下，图片宽度 5.33rem，高度没设置，那就是使用了图片533px 时的高度，为 415px。
在724的高度下，图片高度使用了 415px，那么在屏幕上显示的应该是207.5px，那如果使用 415px 进行vh 换算，应该是 415 / (724x2) x 100，得出的结果约为28.66，这个就是对应的 vh 高度。
那么 55.249vh 同理，原来设置的 8rem，也就是相当于 800px，经过换算后得出结果。
而对图片设置 max-height 是为了不让图片一直随着高度变大得拉伸，以免造成图片变形。
此时在短屏幕手机上显示的效果如下图所示，当然 font-size 我这里没处理，有时候 font-size 也可以使用 vh 适配。
来源：juejin.cn/post/7345729950458724389
