关于前端:别整一坨-CSS-代码了试试这几个实用函数

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi，蕴含一线大厂面试残缺考点、材料以及我的系列文章。

CSS 比拟函数从 2020 年 4 月就开始反对了，我喜爱应用这些函数，但最喜爱的是 clamp()，它也是我最罕用的一个。在这节课中，咱们具体来看下这些比拟函数。

clamp() 函数的作用是把一个值限度在一个下限和上限之间，当这个值超过最小值和最大值的范畴时，在最小值和最大值之间抉择一个值应用。它接管三个参数：最小值、首选值、最大值。

在上面这个例子中，有一个手机款式，同时有两张图片搁置在下面，如下所示:

当容器的宽度变小时，咱们要放大图片的尺寸，这样才不会变形。个别应用百分比单位来解决，如 width: 20%，然而这种形式没有给咱们太多的管制。

咱们心愿可能有一个流体尺寸，要求有最小值和最大值，这就是 clamp 出场的中央。

.section-image {width: clamp(70px, 80px + 15%, 180px);
}

事例地址：https://codepen.io/shadeed/pe…

有时候，咱们须要在页面边角加一些润饰元素，该润饰元素须要具备响应式，比方 PC 端是这样的（黑点局部）：

而后在挪动端是长这样的：

为了做到这，咱们能够应用媒体查问：

.decorative--1 {left: 0;}

.decorative--2 {right: 0;}

@media (max-width: 600px) {
  .decorative--1 {left: -8rem;}

  .decorative--2 {right: -8rem;}

尽管这样做能够，但咱们能够 clamp() 函数，这样更简洁：

  .decorative--1 {left: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
  }

  .decorative--2 {right: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
  }

事例地址：https://codepen.io/shadeed/pe…

有时候，咱们页面的主区的高度须要依据视口大小而变动。这种场景，咱们偏向于通过媒体查问或应用视口单位来扭转这种状况。

.hero {min-height: 250px;}

@media (min-width: 800px) {
  .hero {min-height: 500px;}
}

咱们也能够混合应用固定值和视口单位:

.hero {min-height: calc(350px + 20vh);
}

@media (min-width: 2000px) {
  .hero {min-height: 600px;}
}

但须要留神在较大的视口上高度不能太过高，所以咱们须要设置一个最大高度, 应用 CSS clamp()，咱们能够只用一个 CSS 申明来设置最小、首选和最大高度。

.hero {min-height: clamp(250px, 50vmax, 500px);
}

当调整屏幕大小时，咱们会看到，高度会依据视口宽度逐步扭转。在下面的例子中，50vmax 示意着视口最大尺寸的 50%。

事例地址：https://codepen.io/shadeed/pe…

进度条个别是从左到右一个加载过程，在 CSS 中，咱们能够定位在右边：

.loading-thumb {left: 0%;}

为了将进度条定位到最左边，咱们能够应用 left: 100%，但这会带来一个问题。进度条会跑到容器外：

.loading-thumb {left: 100%;}

这是失常的状况，100% 是从进度条的末端开始的，而进度条自身也有本人的宽度，所以理论宽度会大于容器的宽度。

咱们能够应用 calc() 来减去的进度条宽度，这样就能够了，但这并不是 100% 无效：

.loading-thumb {
  /* 40px represents the thumb width. */
  left: calc(100% - 40px);
}

咱们来看下，如何利用 CSS 变量和比拟函数来更好地实现：

.loading-thumb {
  --loading: 0%;
  --loading-thumb-width: 40px;
  position: absolute;
  top: 4px;
  left: clamp(
    0%,
    var(--loading),
    var(--loading) - var(--loading-thumb-width)
  );
  width: var(--loading-thumb-width);
  height: 16px;
}

下面的步骤如下：

首先，咱们设定一个最小值为 0%
首选值是 --loading CSS 变量的以后值
最大值代表以后的加载量减去进度条件的宽度

这里的 CSS clamp() 为咱们提供了这个组件的三种不同的状态信息，这个计划很 nice:

不仅如此，咱们还能够以雷同的形式来解决不同 UI

.loading-progress {width: clamp(10px, var(--loading), var(--loading) - 10px);
}

最小值等于圆圈宽度的一半，首选值是以后的加载百分比，最大值是以后百分比与圆圈一半的减去后果。

事例地址：https://codepen.io/shadeed/pe…

思考下图，咱们在两个区域之间有一个行分隔符。

在挪动端上，这个分隔符应该变成程度的，如下图：

我的解决方案是应用一个边框和 flex。思路是，边框作为伪元素，以填补垂直和程度状态的可用空间：

.section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section:before {
  content: "";
  border: 1px solid #d3d3d3;
  align-self: stretch;
}

@media (min-width: 700px) {
  .section {
    align-items: center;
    flex-direction: row;
  }
}

咱们也能够应用 clamp 而不须要媒体查问的解决方案：

.section {
  --breakpoint: 400px;
  display: flex;
  flex-wrap: wrap;
}

.section:before {
  content: "";
  border: 2px solid lightgrey;
  width: clamp(0px, (var(--breakpoint) - 100%) * 999, 100%);
}

来分析一下下面的 CSS:

0px：最小值，用于垂直分隔符。它的值是 0，因为咱们应用的是一个 CSS 边框
(var(--breakpoint) - 100%) * 999 是一个个切换器，依据视口宽度在 0px 或 100% 之间切换。

一年前，发现了一个奇妙的 CSS 技巧。应用 CSS max() 函数，依据视口宽度，将卡片的 border-radius 从 0px 切换到 8px。

.card {
  border-radius: max(
    0px,
    min(8px, calc((100vw - 4px - 100%) * 9999))
  );
}

来分析一下下面的 CSS:

咱们有一个 max() 函数，在 0px 和 min() 的计算值之间进行比拟，并抉择较大的值。
min() 函数在 8px 和 calc((100vw - 4px - 100%) * 9999 的计算值之间进行比拟, 这会失去一个十分大的负数或正数。
9999 是一个很大的数字，这样 min 的值都是 8px

有时，咱们可能须要依据视口宽度来扭转一个组件或一个网格的间距。有了 CS 函数就不一样了, 咱们只须要设置一次。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: min(2vmax, 32px);
}

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

起源：https://isdeed.com/article/us…

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

关于前端:别整一坨-CSS-代码了试试这几个实用函数

Clamp(), Max(), 和 Min() 函数

流体的尺寸和定位

装饰性元素

流体高度

Loading Bar

动静分割器

动静 border Radius

间距

交换