乐趣区

关于css:CSS函数那些事一比较函数

jiezi

CSS 比拟函数有三个：

  • max()
  • min()
  • clamp()

min 与 max

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

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

如图，宽度取了最小值 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

大于 400px

200px 到 400px 之间

兼容性

能够看出这 3 个函数都是最近不久才进去的，所以兼容性不太好，国产浏览器全挂，支流浏览器最新的版本根本可能反对，这是个坏事，因为这三个数学在响应式开发中的作用还是很显著的，将来或者这 3 个函数在响应式开发中的比重会缓缓的失去晋升。

罕用的应用场景

上面会列举几个罕用的应用场景

侧边栏响应

对于侧边栏布局，须要侧边栏固定宽度，做响应式时能够思考超过最大宽度时通过 vw 来固定侧边栏的占比

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

字体响应

通过 clamp 限度最大最小值，而后两头的默认值依据视窗扭转

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

突变平滑过渡

突变指定突变的梯度线，依照个别操作会呈现过渡不够平滑的状况，在挪动端会有一条显著的过渡线

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

利用 min 批改一下，过渡会更加平滑一点

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

动静容器宽度

在理论使用中，比方如果咱们想在桌面端限定宽度，在挪动端显示 100%，须要这样写

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

当初只须要

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

十分简洁明了。

总结

这 3 个函数实用于响应式布局的开发，在不须要思考兼容性问题的状况下能够酌情应用，但如果要思考兼容性，还是最好不要应用。我最近在总结 css 函数相干的货色，欢送各位继续关注，源码在这，戳这里戳这里

退出移动版