[分享]css写一个和屏幕等宽的正方形

CSS 可以让我们创建各种形状和布局，包括一个和屏幕宽度相等的正方形。下面我们来看一下如何实现这个效果。.square { width: 100vw; height: 100vw; } 以上代码使用了...

CSS 可以让我们创建各种形状和布局，包括一个和屏幕宽度相等的正方形。下面我们来看一下如何实现这个效果。

.square {
  width: 100vw;
  height: 100vw;
} 

以上代码使用了 CSS 中的单位 vw（视口宽度），这个单位指的是视口（即浏览器窗口）的宽度，其中 1vw 等于视口宽度的 1%。

所以，我们将元素的宽度和高度都设置为 100vw，就可以实现一个和屏幕宽度相等的正方形了。