手机端开发还是有点用处的

效果

可以改变浏览器窗口大小试试效果，高度始终和宽度保持一致

代码

<style>
    .box{
        width: 10%;
        border: 1px solid #2D3748;
        height: 0;
        padding-bottom: 10%;
    }
</style>
<div class="box"></div> 

原理

padding 是基于 width 计算的，让 padding 撑开元素就可以了

写的不好，仅供参考