微信小程序当高度为屏幕百分比时使宽度保持与高度相等

 最近在开发微信小程序项目的过程中，碰到了如下问题：为了在不同设备上显示用户头像时不超出头像的父级容器，我们往往会使用百分制来对容纳头像的容器设置高度，但是设备的高度和宽度并不是相等的，我们设置高度为百分制后，就难以将其宽度设置成与高度相等。为了解决这个问题，我们可以使用vh和vmax尺寸单位来设置宽高。
 在了解vmax之前，先介绍一下vh和vw这两个尺寸单位。与微信小程序中屏幕宽度被分为750rpx类似，设备的屏幕高度被分为100vh，宽度被分为100vw。vmax则是这两者中最大的那个，而在生活中，绝大多数的移动端设备其高度都大于宽度，因此在微信小程序中，将resizable属性置为false后，vmax通常与vh等价。所以我们可以通过将容纳头像的容器宽高都置为相同的vh或vmax值来使得容器的宽高相等。具体的vh值可以根据实际计算（如：父级容器为屏幕高度的20%,放置头像的容器高度为父级容器的80%，则可算得最终vh的值为(20% * 80%) = 16% = 16vh）。最后再设置border-radius值为50%即可实现将头像根据屏幕的高度百分比显示成圆形的效果。代码如下：

	width: 10vh;
    height: 10vh;
    border-radius: 50%;