现代CSS 100天:第 5 天:max()函数

是时候让我跟上现代 CSS 的速度了。
CSS 中有很多新东西我知道的太少了。
为了改变这一点,我开始了#现代CSS100天
为什么或多或少现代 CSS?
因为有些主题将是关于尖端功能的,而其他主题已经存在了很长一段时间,但我对此几乎没有经验。


max()函数采用逗号分隔的表达式列表。将选择列表中的最大值。

div {  width: max(400px, 200px, 300px);  /* width = 400px */}

这个例子没有多大意义,因为值总是400px.
max()当你使用相对单位时,它会显示出它的真正力量。

div {  width: max(300px, 50vw);}

如果50vw小于 300px,则width匹配300px. 如果50vw大于 300px,则匹配50vw. 这基本上是一个较短的版本。

div {  min-width: 300px;  width: 50vw;}

PS:下一篇文章是在周一发布,因为周末是给家人和朋友的。❤️

参见 CodePen