Fungsi CSS min (), max () dan clamp ()

Dukungan browser

Fungsi perbandingan CSS

Fungsi min ()

.element {
    width: min(50%, 500px);
}

Fungsi maks ()

.element {
    width: max(50%, 500px);
}

Fungsi penjepit ()

.element {
    width: clamp(200px, 50%, 1000px);
}

• Lebar elemen tidak akan pernah lebih kecil 200px.
• Parameter kedua dari fungsi, ditetapkan sebagai 50%, akan digunakan hanya jika lebar viewport lebih besar 400pxdan lebih kecil 2000px.
• Lebar item tidak akan melebihi 1000px.

▍ Bagaimana hasil dari fungsi clamp () dihitung?

.element {
    width: clamp(200px, 50%, 1000px);
    /*  -    */
    width: max(200px, min(50%, 1000px));
}

.element {
    width: max(200px, min(50%, 1000px));
    /* ,      1150px */
    width: max(200px, min(575px, 1000px));
    /*   */
    width: max(200px, 575px);
    /*   */
    width: 575px;
}

▍ Masalah konteks

▍ Ekspresi matras

.type {
  /*  font-size ,   12px  100px */
  font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
}

Apa yang akan berubah fungsi perbandingan CSS dalam cara kami mendesain tata letak halaman?

Gunakan kasing

▍ Sidebar dan area halaman utama

.wrapper {
    display: flex;
}

aside {
  flex-basis: max(30vw, 150px);
}

main {
  flex-grow: 1;
}

▍ Ukuran font header

.title {
    font-size: clamp(16px, 5vw, 50px);
}

.title {
    font-size: min(3vw, 24px); /*  ,     */
}

.title {
    font-size: max(16px, min(10vw, 50px));
}

.title {
    font-size: clamp(16px, (1rem + 5vw), 50px);
}

Head Tajuk dekoratif

.section-title:before {
  content: attr(data-test);
  font-size: max(13vw, 50px);
}

▍ Menghasilkan gradien halus di area tampilan yang berbeda

.element {
    background: linear-gradient(135deg, #2c3e50, #2c3e50 60%, #3498db);
}

@media (max-width: 700px) {
    .element {
        background: linear-gradient(135deg, #2c3e50, #2c3e50 25%, #3498db)
    }
}

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

▍ Gradien tembus

.element {
    background: linear-gradient(to top, #000 0, transparent max(20%, 20vw));
}

Marg Margin luar dinamis

h1, h2, h3, h4, h5 {
    margin: 7vh 0 1.05rem;
}

@media (max-height: 2000px) {
    h1, h2, h3, h4, h5 {
        margin: 2.75rem 0 1.05rem;
    }
}

h1, h2, h3, h4, h5 {
    margin: min(7vh, 2.75rem) 0 1.05rem;
}

▍ Lebar Kontainer

.container {
    max-width: 780px;
    width: 80%;
}

.container {
    max-width: min(80%, 780px);
}

▍ Indentasi Vertikal

.hero {
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

Ound Batas dan Bayangan

.element {
    box-shadow: 0 3px 10px 0 red;
    border: min(1vw, 10px) solid #468eef;
    border-radius: clamp(7px, 2vw, 20px);
    box-shadow: 0 3px clamp(5px, 4vw, 50px) 0 rgba(0, 0, 0, 0.2);
}

Istance Jarak antar sel dari tata letak kisi

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: clamp(1rem, 2vw, 24px);
}

▍Gunakan dalam fungsi CSS untuk membandingkan nilai tanpa unit

.element {
    width: clamp(0, 10vmax, 10rem);
}

▍ Mekanisme redundansi untuk browser yang tidak mendukung min (), max () dan clamp ()

1. Konfigurasi manual dari mekanisme cadangan

.hero {
    padding: 4rem 1rem;
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

2. Menggunakan arahan CSS mendukung

.hero {
    /*     ,   min() */
    padding: 4rem 1rem;
}

@supports (width: min(10px, 5vw)) {
   /*   ,   min() */
  .hero {
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
  }
}

▍Tentang ketersediaan konten