CSS实现正方形
我们可以通过CSS中的纵横比来实现一个正方形，这样只需要设置一个宽度即可：

.square {
  background: #8A2BE2;
  width: 25rem;
  aspect-ratio: 1/1;
}

aspect-ratio 媒体属性可以用来测试视口的宽高比。当然上述例子比较简单，来看看MDN中给出的纵横比的示例：

/* 堆代码 duidaima.com */
/* 最小宽高比 */
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /* blue */
  }
}

/* 最大宽高比 */
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff;  /* cyan */
  }
}

/* 明确的宽高比, 放在最下部防止同时满足条件时的覆盖*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /* red */
  }
}

这里通过媒体查询在页面视口不同纵横比时，显示不同的背景颜色。