CSS-Vergleichsfunktionen werden seit April 2020 unterstützt. Ich verwende diese Funktionen gerne, aber mein Favorit istclamp()
, den ich auch am häufigsten verwende. In dieser Lektion betrachten wir diese Vergleichsfunktionen im Detail.clamp()
,它也是我最常用的一个。在这节课中,我们详细来看下这些比较函数。
clamp()
函数的作用是把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。它接收三个参数:最小值、首选值、最大值。【学习视频分享:css视频教程、web前端】
在下面这个例子中,有一个手机样式,同时有两张图片放置在上面,如下所示:
当容器的宽度变小时,我们要缩小图片的尺寸,这样才不会变形。一般使用百分比单位来解决,如width: 20%
,但是这种方式没有给我们太多的控制。
我们希望能够有一个流体尺寸,要求有最小值和最大值,这就是clamp
出场的地方。
.section-image { width: clamp(70px, 80px + 15%, 180px); }
有时候,我们需要在页面边角加一些修饰元素,该修饰元素需要具有响应式,比如 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); }
有时候,我们页面的主区的高度需要根据视口大小而变化。这种场景,我们倾向于通过媒体查询或使用视口单位来改变这种情况。
.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; } }
但需要注意在较大的视口上高度不能太过高,所以我们需要设置一个最大高度,使用CSSclamp()
,我们可以只用一个CSS声明来设置最小、首选和最大高度。
.hero { min-height: clamp(250px, 50vmax, 500px); }
当调整屏幕大小时,我们会看到,高度会根据视口宽度逐渐改变。在上面的例子中,50vmax
表示着视口最大尺寸的50%
。
进度条一般是从左到右一个加载过程,在 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
clamp()
Die Funktion der Funktion besteht darin, einen Wert zwischen einer Obergrenze und einer Untergrenze zu begrenzen den Mindest- und Höchstwertbereich überschreitet, wählen Sie einen zu verwendenden Wert zwischen dem Mindestwert und dem Höchstwert aus. Es erhält drei Parameter: Minimalwert, Vorzugswert, Maximalwert. [Teilen von Lernvideos:CSS-Video-Tutorial,Web-Frontend]width: 20 %
, aber diese Methode gibt uns nicht viel Kontrolle. Wir möchten eine Flüssigkeitsgröße haben, die einen Mindest- und Höchstwert erfordert, und hier kommtclamp
ins Spiel.
.loading-progress { width: clamp(10px, var(--loading), var(--loading) - 10px); }
.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( )
-Funktion, die prägnanter ist:
.section { --breakpoint: 400px; display: flex; flex-wrap: wrap; } .section:before { content: ""; border: 2px solid lightgrey; width: clamp(0px, (var(--breakpoint) - 100%) * 999, 100%); }
.card { border-radius: max( 0px, min(8px, calc((100vw - 4px - 100%) * 9999)) ); }
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: min(2vmax, 32px); }
clamp()< eine maximale Höhe festlegen /code> können wir mit nur einer CSS-Deklaration die minimale, bevorzugte und maximale Höhe festlegen. rrreeeBeim Ändern der Bildschirmgröße werden wir feststellen, dass sich die Höhe basierend auf der Breite des Ansichtsfensters allmählich ändert. Im obigen Beispiel stellt 50vmax
50 %
der maximalen Größe des Ansichtsfensters dar.
Fall Adresse:codepen.io/shadeed/pen …Ladebalken
< img src="https://img.php.cn/upload/image/431/985/253/166721548066686Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung)" title="166721548066686Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung)" alt="Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung)"/>Der Fortschrittsbalken ist Im Allgemeinen ein Ladevorgang von links nach rechts. In CSS können wir ihn links positionieren: rrreeeUm den Fortschrittsbalken ganz rechts zu positionieren, können wirleft: 100%
verwenden. aber das wird eine Frage aufwerfen. Der Fortschrittsbalken wird außerhalb des Containers ausgeführt:
rrreeeDies ist eine normale Situation, 100 % beginnt am Ende des Fortschrittsbalkens und der Fortschrittsbalken selbst hat auch seine eigene Breite, sodass die tatsächliche Breite größer als die Breite des Containers ist . Wir könnencalc()
verwenden, um die Breite des Fortschrittsbalkens zu subtrahieren, was in Ordnung ist, aber nicht 100 % effektiv ist: rrreeeSchauen wir uns an, wie man CSS-Variablen verwendet und Vergleichsfunktion zur besseren Implementierung: rrreeeDie oben genannten Schritte sind wie folgt:
- Zuerst legen wir einen Mindestwert auf
0%< fest /code>
- Der bevorzugte Wert ist der aktuelle Wert der CSS-Variable
--loading
最大值代表当前的加载量减去进度条件的宽度
这里的CSSclamp()
为我们提供了这个组件的三种不同的状态信息,这个方案很 nice:
![166721548952185Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung) Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung)](https://img.php.cn/upload/image/897/554/110/166721548952185Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung))
不仅如此,我们还可以以相同的方式来处理不同UI
![166721549339356Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung) Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung)](https://img.php.cn/upload/image/226/927/716/166721549339356Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung))
.loading-progress { width: clamp(10px, var(--loading), var(--loading) - 10px); }
Nach dem Login kopieren
Nach dem Login kopieren
最小值等于圆圈宽度的一半,首选值是当前的加载百分比,最大值是当前百分比与圆圈一半的减去结果。
![166721549792637Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung) 1Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung)](https://img.php.cn/upload/image/386/578/204/166721549792637Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung))
动态分割器
考虑下图,我们在两个区域之间有一个行分隔符。
![166721550128459Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung) 1Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung)](https://img.php.cn/upload/image/264/522/229/166721550128459Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung))
在移动端上,这个分隔符应该变成水平的,如下图:
![166721550528420Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung) 1Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung)](https://img.php.cn/upload/image/683/656/392/166721550528420Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung))
我的解决方案是使用一个边框和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; } }
Nach dem Login kopieren
Nach dem Login kopieren
我们也可以使用clamp
而不需要媒体查询的解决方案:
.section { --breakpoint: 400px; display: flex; flex-wrap: wrap; } .section:before { content: ""; border: 2px solid lightgrey; width: clamp(0px, (var(--breakpoint) - 100%) * 999, 100%); }
Nach dem Login kopieren
Nach dem Login kopieren
来剖析一下上面的CSS:
- 0px:最小值,用于垂直分隔符。它的值是
0
,因为我们使用的是一个CSS边框
(var(--breakpoint) - 100%) * 999
是一个个切换器,根据视口宽度在0px
或100%
之间切换。
![166721550981168Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung) 1Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung)](https://img.php.cn/upload/image/652/970/660/166721550981168Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung))
动态 border Radius
一年前,发现了一个巧妙的CSS技巧。使用CSSmax()
函数,根据视口宽度,将卡片的border-radius
从0px
切换到8px
。
![1667215513699470.png 1Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung)](https://img.php.cn/upload/image/937/390/464/1667215513699470.png)
.card { border-radius: max( 0px, min(8px, calc((100vw - 4px - 100%) * 9999)) ); }
Nach dem Login kopieren
Nach dem Login kopieren
来剖析一下上面的CSS:
我们有一个max()
函数,在0px
和min()
的计算值之间进行比较,并选择较大的值。
min()
函数在8px
和calc((100vw - 4px - 100%) * 9999
的计算值之间进行比较,这会得到一个非常大的正数或负数。
9999
是一个很大的数字,这样min
的值都是8px
间距
![166721551861711Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung) 1Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung)](https://img.php.cn/upload/image/781/222/196/166721551861711Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung))
有时,我们可能需要根据视口宽度来改变一个组件或一个网格的间距。有了CS函数就不一样了,我们只需要设置一次。
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: min(2vmax, 32px); }
Nach dem Login kopieren
Nach dem Login kopieren
![1667215522358882.gif Detaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung)](https://img.php.cn/upload/image/719/994/800/1667215522358882.gif)
原文地址:https://isdeed.com/article/use-cases-css-comparison-functions/
更多编程相关知识,请访问:编程视频!!
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Vergleichsfunktionen in CSS (Beispieleinführung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!