• 纯CSS如何实现正方形效果?
  • 发布于 2个月前
  • 205 热度
    0 评论
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 */
  }
}

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