当前位置:   article > 正文

css如何动态计算,CSS中的动态计算

css 计算

自从CSS的calc()函数得到浏览器的支持起,在CSS中就可以做一些简单的数学运算。如果你阅读过 图解CSS系列 中的 《CSS函数》一文的话,你会发现现在或将来有更多的函数可以直接帮助我们在CSS做一些计算,比如颜色计算、三角函数的计算等。尤其是CSS的min()、max()、clamp()以及CSS Grid布局模块中的minmax()出现之后,网页布局带来了革命性的变化。除此之外,在一些特定的环境之下,还有一些其他的CSS函数可以帮助我们做一些动态计数和计算。今天在这篇文章中就来和大家聊聊这方面的话题。

回顾一下

css-function-5.svg

但我们今天主要和大家探讨其中的几个:

数学函数calc():使用calc()函数可以在CSS中进行数学运算,可以结合CSS的单位一起计算,比如calc(100vw - 300px)

比较函数min()、max()和clamp():min()和max()函数可以接受两个或多个参数,并返回最小或最大的参数(值);clamp()是min()和max()的超集(组合),它接受三个参数,即clamp(MIN, VAL, MAX),等同于min(max(MIN, VAL), MAX) 或 max(MIN, min(VAL, MAX))

网格函数minmax():它接受两个参数,即minmax(MIN, MAX),该函数是CSS Grid布局模块中独有的一个函数,通常和另外一个网格函数repeat()运用在grid-template-columns属性上

计数函数counter():该函数用来设置插入计数器的值,常和CSS的counter-reset、counter-increment属性以及伪元素::before、::after或::marker配合content生成计数器内容,比如实现列表项序列号,大纲列表等

另外,在接下来的内容中会涉及到CSS自定义属性(变量)相关的内容,如果你从未接触过的话,建议你先花一点点时间阅读《图解CSS:CSS自定义属性》和《CSS自定义属性你知多少》,这样更利于你阅读接下来的内容。

更多有关于CSS自定义属性的介绍还可以点击这里阅读。

相对而言,其中min()、max()和clamp()是较新的CSS特性,为此先花一点时间简单向大家介绍一下这三个函数。

min()、max()和clamp()三个函数都常称为CSS的比较函数,其中min()和max()相对而言要比clamp()函数易于理解。

min()和max()

min()和max()都可以接受两个或两个以上的参数,参数之间用逗号分隔,而且参数还可以是一些表达式,比如说一些简单的计算5vw + 5px,并且这些计算表达式不需要使用calc()函数。当然,你还可以在一个CSS变量里面进行计算,然后使用这个变量即可。这两个函数可以运用于可接受,, , , , 和 类型值的属性。

有关于CSS值和单位方面更详细的介绍,可以阅读《CSS 的值和单位》和 《元素尺寸的设置》。

min()和max()之间的差异只是返回值的不同:

min()函数会从多个参数(或表达式)中返回一个最小值作为CSS属性的值,即 使用min()设置最大值,等同于max-width

max()函数会从多个参数(或表达式)中返回一个最大值作为CSS属性的值,即 使用max()设置最小值,等同于min-width

比如下面这个是min()函数的示例:

.element {

width: min(50vw, 500px);

}

这个是max()函数的示例:

.element {

width: max(50vw, 500px);

}

你可以尝试着在浏览器查看这两个示例,并且改变浏览器视窗的大小,你将看到.element的变化。

clamp()

clamp()和min()以及max()略有不同,它将返回一个区间值,即 在定义的最小值和最大值之间的数值范围内的一个中间值。该函数接受三个参数:

最小值(MIN),

中间值(VAL),也称首选值

最大值(MAX)

clamp(MIN, VAL, MAX),这三个值之间的关系(或者说取值的方式):

如果VAL在MIN和MAX之间,则使用VAL作为函数的返回值

如果VAL大于MAX,则使用MAX作为函数的返回值

如果VAL小于MIN,则使用MIN作为函数的返回值

比如下面这个示例:

.element {

/**

* MIN = 100px

* VAL = 50vw ➜ 根据视窗的宽度计算

* MAX = 500px

**/

width: clamp(100px, 50vw, 500px);

}

就这个示例而言,clamp()函数的计算会经历以下几个步骤:

.element {

width: clamp(100px, 50vw, 500px);

/* 50vw相当于视窗宽度的一半,如果视窗宽度是760px的话,那么50vw相当等于380px*/

width: clamp(100px, 380px, 500px);

/* 用min()和max()描述*/

width: max(100px, min(380px, 500px))

/*min(380px, 500px)返回的值是380px*/

width: max(100px, 380px)

/*max(100px, 380px)返回的值是380px*/

width: 380px;

}

示例效果如下:

简单地说,clamp()、min()和max()函数都可以随着浏览器视窗宽度的缩放对值进行调整,但它们的计算的值取决于上下文。

特别声明,有关于这三个参数更详细的介绍,可以阅读《聊聊min(),max()和clamp()函数》一文。

动态计算

前奏有点长,下面开始来聊CSS中的动态计算,我们先从calc()函数开始。

calc()

大家对calc()函数的第一印象就是使用它来做一些计算。在一些布局场景中,calc()能帮助我们快速解决一些麻烦,甚至是实现一些令人感到头疼的问题。比如说,我们在构建一个APP应用的,时常会碰到NavBar均分的效果,如果NavBar的项目数是一个偶数项的话,计算非常简单,但对于一些奇数项来说,让我们无法均分完。拿三等分为例吧,将100%均分成三份的话,将永远无法均分完:

881a9dd78b410600dc883fd59469e0a1.png

70843b9f8615f57a92aaddcc2493af32.png

这个时候我们使用calc()就可以避免打破均分的效果:

.nav__item {

width: calc(100% / 3);

}

9837f260c292cfd665f299ca0379a6bb.png

你可能也发现了,这样做也有一定的缺陷,那就是文本内容过长时会溢出。如果不希望溢出的话,则需要考虑使用CSS的text-oveflow:ellipsis用三个点来表示被截取的内容。

我们还可以使用CSS的自定义属性来代表NavBar的项目的数量,这样就可以灵活的根据项目数做计算:

:root {

--i: 3;

}

.nav__item {

width: calc(100% / var(--i));

}

也可以稍微借助JavaScript,根据NavBar的项目数动态设置--i的值:

const itemNums = document.querySelectorAll('.flex__item').length

document.documentElement.style.setProperty('--i', itemNums)

这里

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/163782
推荐阅读
相关标签
  

闽ICP备14008679号