Open lostvita opened 3 years ago
如何使用纯css,来画出跟随窗口变化的正方形?
今天看到了vmin和vmax属性,很有意思,感觉在某一些场景下很好用!
先来介绍一下vm和vh vm是viewport width的缩写,顾名思义,就是视窗的宽度,100vw就是100%的视窗宽度;同理,100vh就是100%的视窗高度。
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%; }
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%; }
🤔emmm......any else ?
如何使用纯css,来画出跟随窗口变化的正方形?
先来介绍一下vm和vh vm是viewport width的缩写,顾名思义,就是视窗的宽度,100vw就是100%的视窗宽度;同理,100vh就是100%的视窗高度。
vmin和vmax是什么? 看名词就能理解得到,vmin表示vw和vh中的较小者,vmax表示vw和vh中的较大者。如上图片示例中,视窗的宽度大于视窗高度,那么vmin = vh,vmax = vw。 如此,纯css来实现一个正方形就很简单了:
这样就能实现一个边宽总是等于视窗中最小长度的边的20%。
还有别的方式吗?
padding-top/padding-bottom:当padding的单位为%时,它的值是相对于自身元素的width的。
🤔emmm......any else ?