&

別整一坨 CSS 代碼了，試試這幾個(gè)CSS比較函數(shù)Clamp(), Max(), 和 Min()

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

freeflydom

2023年7月14日 14:57 本文熱度 823

clamp() 函數(shù)的作用是把一個(gè)值限制在一個(gè)上限和下限之間，當(dāng)這個(gè)值超過最小值和最大值的范圍時(shí)，在最小值和最大值之間選擇一個(gè)值使用。它接收三個(gè)參數(shù)：最小值、首選值、最大值。

流體的尺寸和定位

在下面這個(gè)例子中，有一個(gè)手機(jī)樣式，同時(shí)有兩張圖片放置在上面，如下所示:

當(dāng)容器的寬度變小時(shí)，我們要縮小圖片的尺寸，這樣才不會(huì)變形。一般使用百分比單位來解決，如 width: 20%，但是這種方式?jīng)]有給我們太多的控制。

我們希望能夠有一個(gè)流體尺寸，要求有最小值和最大值，這就是 clamp 出場(chǎng)的地方。

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

事例地址：codepen.io/shadeed/pen…

裝飾性元素

有時(shí)候，我們需要在頁(yè)面邊角加一些修飾元素，該修飾元素需要具有響應(yīng)式，比如 PC 端是這樣的（黑點(diǎn)部分）：

然后在移動(dòng)端是長(zhǎng)這樣的：

為了做到這，我們可以使用媒體查詢：

.decorative--1 {
  left: 0;
}

.decorative--2 {
  right: 0;
}

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

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

雖然這樣做可以，但我們可以 clamp()函數(shù)，這樣更簡(jiǎn)潔：

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

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

事例地址：codepen.io/shadeed/pen…

流體高度

有時(shí)候，我們頁(yè)面的主區(qū)的高度需要根據(jù)視口大小而變化。這種場(chǎng)景，我們傾向于通過媒體查詢或使用視口單位來改變這種情況。

.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;
  }
}

但需要注意在較大的視口上高度不能太過高，所以我們需要設(shè)置一個(gè)最大高度,使用CSS clamp()，我們可以只用一個(gè)CSS聲明來設(shè)置最小、首選和最大高度。

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

當(dāng)調(diào)整屏幕大小時(shí)，我們會(huì)看到，高度會(huì)根據(jù)視口寬度逐漸改變。在上面的例子中，50vmax表示著視口最大尺寸的 50%。

事例地址：codepen.io/shadeed/pen…

Loading Bar

進(jìn)度條一般是從左到右一個(gè)加載過程，在 CSS 中，我們可以定位在左邊：

.loading-thumb {

left: 0%;

}

為了將進(jìn)度條定位到最右邊，我們可以使用 left: 100%，但這會(huì)帶來一個(gè)問題。進(jìn)度條會(huì)跑到容器外：

.loading-thumb {

left: 100%;

}

這是正常的情況，100% 是從進(jìn)度條的末端開始的，而進(jìn)度條本身也有自己的寬度，所以實(shí)際寬度會(huì)大于容器的寬度。

我們可以使用 calc() 來減去的進(jìn)度條寬度，這樣就可以了，但這并不是100%有效：

.loading-thumb {

/* 40px represents the thumb width. */

left: calc(100% - 40px);

}

我們來看下，如何利用CSS變量和比較函數(shù)來更好地實(shí)現(xiàn)：

.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;
}

上面的步驟如下：

首先，我們?cè)O(shè)定一個(gè)最小值為 0%
首選值是 --loading CSS變量的當(dāng)前值
最大值代表當(dāng)前的加載量減去進(jìn)度條件的寬度

這里的CSS clamp()為我們提供了這個(gè)組件的三種不同的狀態(tài)信息，這個(gè)方案很 nice:

不僅如此，我們還可以以相同的方式來處理不同UI

.loading-progress {

width: clamp(10px, var(--loading), var(--loading) - 10px);

}

最小值等于圓圈寬度的一半，首選值是當(dāng)前的加載百分比，最大值是當(dāng)前百分比與圓圈一半的減去結(jié)果。

事例地址：codepen.io/shadeed/pen…

動(dòng)態(tài)分割器

考慮下圖，我們?cè)趦蓚€(gè)區(qū)域之間有一個(gè)行分隔符。

在移動(dòng)端上，這個(gè)分隔符應(yīng)該變成水平的，如下圖：

我的解決方案是使用一個(gè)邊框和flex。思路是，邊框作為偽元素，以填補(bǔ)垂直和水平狀態(tài)的可用空間：

.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，因?yàn)槲覀兪褂玫氖且粋€(gè)CSS邊框
(var(--breakpoint) - 100%) * 999 是一個(gè)個(gè)切換器，根據(jù)視口寬度在 0px或 100% 之間切換。

動(dòng)態(tài) border Radius

一年前，發(fā)現(xiàn)了一個(gè)巧妙的CSS技巧。使用CSS max()函數(shù)，根據(jù)視口寬度，將卡片的border-radius 從 0px 切換到 8px。

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

來剖析一下上面的CSS:

我們有一個(gè) max() 函數(shù)，在 0px 和 min()的計(jì)算值之間進(jìn)行比較，并選擇較大的值。
min() 函數(shù)在 8px 和 calc((100vw - 4px - 100%) * 9999 的計(jì)算值之間進(jìn)行比較,這會(huì)得到一個(gè)非常大的正數(shù)或負(fù)數(shù)。
9999 是一個(gè)很大的數(shù)字，這樣 min 的值都是 8px

間距

有時(shí)，我們可能需要根據(jù)視口寬度來改變一個(gè)組件或一個(gè)網(wǎng)格的間距。有了CS函數(shù)就不一樣了,我們只需要設(shè)置一次。

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

原文鏈接

該文章在 2023/7/14 14:57:19 編輯過

關(guān)鍵字查詢

css

比較

代碼

函數(shù)

相關(guān)文章

正在查詢...

點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。