纯 CSS实现根据元素已知的宽度设置高度以及注意事项

一个移动端的小需求，元素的宽度根据屏幕宽度进行获取，也就是实时获取，可以当成单位是 百分比%，要求元素表现为正方形，也就是说高度要等于宽度。

---

发现这个需求的时候，我第一时间就是想用 js来控制，根据屏幕宽度来计算出元素宽度值，并将元素的高度也赋值成这个值，这样一来就实现元素的宽度、高度一致了，没什么难度，几行代码嗖嗖地搞定。

不过这个需求其实只是我正在做的项目的一个小点而已，我当时正在专心致志地写 css，做过稍大一点项目的人都知道，各种切换代码最烦了，宁愿在浏览器上另开一个窗口看看有没有其他的办法也不想切换项目文件夹来回折腾，所以我就网上搜了一下，确实让我看到了一个方法。

不说废话，先上代码：

// HTML
<div class="box">
    <img src="https://dummyimage.com/400x500/ff3ff3)" alt="">
</div>

// CSS
.box {
  position:relative;
  width:40%;
  height:0;
  font-