CSS中的比较函数有哪些-创新互联

这篇文章给大家分享的是有关CSS中的比较函数有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

创新互联是一家专业提供墨竹工卡企业网站建设,专注与成都网站制作、成都做网站、html5、小程序制作等业务。10年已为墨竹工卡众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

CSS 比较函数

CSS中的比较函数有哪些

CSS比较函数有三个:

  • max()

  • min()

  • clamp()

min与max

CSS min,max函数作用类似于js函数中的min,max,用于取多个属性中的最小值或者较大值,属性之间用逗号分隔。例子如下

      width: min(100px,200px,300px); //取值100px
      height: max(100px,200px,300px); //取值300px

CSS中的比较函数有哪些

如图,宽度取了最小值100px,高度取了较大值300px.

clamp

clamp函数需要传入3个参数,一个最小值,一个默认值,一个较大值,用于处理边界值,当默认值大于较大值时,取较大值,小于最小值时,取最小值,介于最小与较大之间时,取默认值。

使用方法

clamp(MIN,DEFAULT,MAX)

clamp就相当于max(MIN,min(DEFAULT,MAX))

案例

font-size: clamp(20px,10vw,40px);

分析下,当10vw小于20px,也就是页面宽度小于等于200px时,字体最小为20px,当10vw大于40px,也就是页面宽度大于等于400px时,字体较大为40px.处于200px-400px之间的,则按照 width/10的计算公式进行计算,下面验证一下

小于200px

CSS中的比较函数有哪些

大于400px

CSS中的比较函数有哪些

200px到400px之间

CSS中的比较函数有哪些

兼容性

CSS中的比较函数有哪些

可以看出这3个函数都是最近不久才出来的,所以兼容性不太好,国产浏览器全挂,主流浏览器新的版本基本能够支持,这是个好事,因为这三个数学在响应式开发中的作用还是很明显的,未来或许这3个函数在响应式开发中的比重会慢慢的得到提升。

常用的使用场景

下面会列举几个常用的使用场景

侧边栏响应

对于侧边栏布局,需要侧边栏固定宽度,做响应式时可以考虑超过较大宽度时通过vw来固定侧边栏的占比

      aside {
        background: #ccc;
        flex-basis: max(30vw, 150px);
      }
      main {
        background: #09acdd;
        flex-grow: 1;
      }

CSS中的比较函数有哪些

字体响应

通过clamp限制较大最小值,然后中间的默认值根据视窗改变

font-size: clamp(20px, 10vw, 40px);

渐变平滑过渡

渐变指定渐变的梯度线,按照一般操作会出现过渡不够平滑的情况,在移动端会有一条明显的过渡线

background: linear-gradient(135deg, #2c3e50, #2c3e50, #3498db);

CSS中的比较函数有哪些

利用min修改一下,过渡会更加平滑一点

background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);

CSS中的比较函数有哪些

动态容器宽度

在实际运用中,比如如果我们想在桌面端限定宽度,在移动端显示100%,需要这样写

    .container{
      width: 1440px;
      max-width: 100%;
    }

现在只需要

    .container{
      width: min(1440px,100%);
    }

感谢各位的阅读!关于CSS中的比较函数有哪些就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!

新闻名称:CSS中的比较函数有哪些-创新互联
当前URL:https://www.cdcxhl.com/article44/cceche.html

成都网站建设公司_创新互联,为您提供用户体验电子商务做网站品牌网站建设云服务器Google

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都seo排名网站优化