css跟随窗口变化的正方形

如何使用纯css，来画出跟随窗口变化的正方形？

今天看到了vmin和vmax属性，很有意思，感觉在某一些场景下很好用！

1. 先来介绍一下vm和vh

vm是viewport width的缩写，顾名思义，就是视窗的宽度，100vw就是100%的视窗宽度；同理，100vh就是100%的视窗高度。

2. vmin和vmax是什么？

看名词就能理解得到，vmin表示vw和vh中的较小者，vmax表示vw和vh中的较大者。如上图片示例中，视窗的宽度大于视窗高度，那么vmin = vh，vmax = vw。 如此，纯css来实现一个正方形就很简单了：

.box { width: 20vmin; height: 20vmin }
复制代码

这样就能实现一个边宽总是等于视窗中最小长度的边的20%。

还有别的方式吗？

padding-top/padding-bottom：当padding的单位为%时，它的值是相对于自身元素的width的。

In CSS, all four margin: and padding: percentages are relative to the width ...even though that may seem nonsensical. That's just the way the CSS spec is, there's nothing you can do about it.

可以用以下的方式：

.box { width: 20%; padding-top: 20%; }
复制代码

作者：Lostvita
链接：juejin.cn/post/710529… 来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。