深入理解CSS 函数Clamp()、Max() 和 Min() 的用例
在本文中，我将探讨一些比较函数的用例，并详细解释每一个用例，大多数情况下，用例将是关于将它们用于流动尺寸以外的情况，因为这是最流行的用例，我将把它留到最后。
如果你不了解比较函数，那也没有关系，现在我们一起来学习。Clamp()、Max() 和 Min() CSS 函数的用例流体尺寸和定位在此示例中，我们有一个带有手机的部分，以及位于顶部的两个图像。最初，它将如下图所示：
当容器的宽度变小时，我们希望缩小图像的大小以适应可用空间。我们可以通过使用宽度或高度的百分比值（例如：宽度：20%）来做到这一点，但这并没有给我们太多的控制权。我们希望能够有一个流体大小，它同时尊重最小值和最大值，这就是clamp来救援的地方！
CSS:
.section-image {
width: clamp(70px, 80px + 15%, 180px);
}
<< · Back Index ·>>
、Max() 和 Min() 的用例&pics=http://www.icpchaxun.com/wp-content/themes/wpzt-minblog/timthumb.php?src=http://www.icpchaxun.com/wp-content/themes/wpzt-minblog/static/images/no-image.png&w=200&h=200zc=1&q=100&summary=在本文中，我将探讨一些比较函数的用例，并详细解释每一个用例，大多数情况下，用例将是关于将它们用于流动尺寸以外的 […]&desc=在本文中，我将探讨一些比较函数的用例，并详细解释每一个用例，大多数情况下，用例将是关于将它们用于流动尺寸以外的 […]){kind=link}
、Max() 和 Min() 的用例&pics=http://www.icpchaxun.com/wp-content/themes/wpzt-minblog/timthumb.php?src=http://www.icpchaxun.com/wp-content/themes/wpzt-minblog/static/images/no-image.png&w=200&h=200zc=1&q=100&summary=在本文中，我将探讨一些比较函数的用例，并详细解释每一个用例，大多数情况下，用例将是关于将它们用于流动尺寸以外的 […]){kind=link}
、Max() 和 Min() 的用例&pic=http://www.icpchaxun.com/wp-content/themes/wpzt-minblog/timthumb.php?src=http://www.icpchaxun.com/wp-content/themes/wpzt-minblog/static/images/no-image.png&w=200&h=200zc=1&q=100&searchPic=true){kind=link}
上一篇
相关推荐
都表示”醒“，wake，waken，awake和awaken到底怎麼區分
四大“醒”，包括 wake，waken，awake 和 awaken，它們意思相近，有的時候甚至感覺它們是一樣的，那怎麼區分它們呢？一、wake1....