移动端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 适配。