Penjelasan terperinci tentang fungsi perbandingan dalam CSS (contoh pengenalan)

Fungsi perbandingan CSS telah disokong sejak April 2020. Saya suka menggunakan fungsi ini, tetapi kegemaran saya ialah clamp(), yang juga merupakan fungsi yang paling saya gunakan. Dalam pelajaran ini, kita melihat fungsi perbandingan ini secara terperinci.

Fungsi Clamp(), Max(), dan Min()

clamp() Fungsi fungsi adalah untuk mengehadkan nilai kepada a Di antara had atas dan had bawah, apabila nilai melebihi julat nilai minimum dan maksimum, pilih nilai antara nilai minimum dan maksimum untuk digunakan. Ia menerima tiga parameter: nilai minimum, nilai pilihan, nilai maksimum. [Belajar perkongsian video: tutorial video css, bahagian hadapan web]

Saiz dan kedudukan cecair

Yang ini di bawah Dalam contoh, terdapat gaya telefon mudah alih dengan dua imej diletakkan padanya pada masa yang sama, seperti yang ditunjukkan di bawah:

Apabila lebar bekas menjadi lebih kecil, kita perlu mengecilkan saiz imej dengan cara ini ia tidak akan berubah bentuk. Ia biasanya diselesaikan menggunakan unit peratusan, seperti width: 20%, tetapi kaedah ini tidak memberi kita banyak kawalan.

Kami mahu dapat mempunyai saiz bendalir yang memerlukan nilai minimum dan maksimum, dan di sinilah clamp masuk.

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

Alamat contoh: codepen.io/shadeed/pen…

Elemen hiasan

Kadangkala, kita perlu menambah beberapa elemen hiasan pada sudut halaman, yang perlu responsif Contohnya, bahagian PC kelihatan seperti ini (bahagian titik hitam):

Kemudian ia kelihatan seperti ini pada bahagian mudah alih:

Untuk melakukan ini, kita boleh menggunakan pertanyaan media:

.decorative--1 {
  left: 0;
}

.decorative--2 {
  right: 0;
}

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

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

Walaupun Ini berfungsi, tetapi kita boleh menggunakan fungsi

, yang lebih ringkas: clamp()

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

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

Contoh alamat:

codepen.io/shadeed/pen…

Ketinggian Cecair

Kadangkala, ketinggian kawasan utama halaman kami perlu berubah berdasarkan saiz viewport. Dalam senario ini, kami cenderung untuk mengubah keadaan ini melalui pertanyaan media atau menggunakan unit port pandangan.

.hero {
  min-height: 250px;
}

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

Kami juga boleh mencampurkan nilai tetap dan unit viewport:

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

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

Tetapi ambil perhatian bahawa ketinggian tidak boleh digunakan pada viewport yang lebih besar Terlalu tinggi, jadi kita perlu menetapkan ketinggian maksimum Menggunakan CSS

, kita boleh menetapkan ketinggian minimum, pilihan dan maksimum dengan hanya satu pernyataan CSS. clamp()

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

Apabila mengubah saiz skrin, kita akan melihat ketinggian berubah secara beransur-ansur berdasarkan lebar port pandangan. Dalam contoh di atas,

mewakili saiz maksimum port pandangan 50vmax. 50%

Alamat contoh:

codepen.io/shadeed/pen…

Loading Bar

Bar kemajuan biasanya merupakan proses pemuatan dari kiri ke kanan Dalam CSS, kita boleh meletakkannya di sebelah kiri:

.loading-thumb {
  left: 0%;
}

Untuk meletakkan bar kemajuan di hujung kanan, kita boleh menggunakan

, tetapi ini akan menyebabkan masalah. Bar kemajuan akan berjalan di luar bekas: left: 100%

.loading-thumb {
  left: 100%;
}

Ini adalah situasi biasa, 100% bermula dari penghujung bar kemajuan, dan bar kemajuan itu sendiri juga mempunyai lebarnya sendiri, jadi lebar sebenar akan lebih besar daripada lebar bekas.

Kita boleh menggunakan

untuk menolak lebar bar kemajuan, yang tidak mengapa, tetapi ini tidak 100% berkesan: calc()

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

Mari kita lihat cara menggunakan Pembolehubah CSS dan fungsi perbandingan untuk pelaksanaan yang lebih baik:

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

Langkah di atas adalah seperti berikut:

• Pertama, kami menetapkan nilai minimum sebagai

  0%

• Nilai pilihan ialah nilai semasa

  pembolehubah CSS--loading

• 最大值代表当前的加载量减去进度条件的宽度

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

不仅如此，我们还可以以相同的方式来处理不同UI

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

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

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

动态分割器

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

在移动端上，这个分隔符应该变成水平的，如下图：

我的解决方案是使用一个边框和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% 之间切换。

动态 border Radius

一年前，发现了一个巧妙的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);
}

原文地址：https://isdeed.com/article/use-cases-css-comparison-functions/

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci Penjelasan terperinci tentang fungsi perbandingan dalam CSS (contoh pengenalan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!