0Pricing
CSS Academy · Pelajaran

Fungsi Min, Max, dan Clamp

Gunakan min(), max(), dan clamp() untuk ukuran adaptif yang merespons ukuran kontainer atau area pandang.

Fungsi Min, Max, dan Clamp adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Mengapa Fungsi Perbandingan CSS?

Fungsi perbandingan CSS memungkinkan Anda menyatakan ukuran bersyarat tanpa JavaScript: "gunakan ukuran ini, tetapi jangan pernah lebih kecil atau lebih besar daripada batas-batas ini." Fungsi-fungsi ini merupakan inti desain modern yang fleksibel dan responsif.

Fungsi min()

min() mengembalikan nilai terkecil dari daftar nilai yang dipisahkan koma. Peramban memilih nilai mana pun yang paling kecil pada ukuran area pandang saat ini.

<div class="container">Container width: min(800px, 90%)</div>

Fungsi max()

max() mengembalikan nilai terbesar. Fungsi ini berguna untuk menetapkan ukuran minimum yang juga dapat membesar.

<p>Text sized with max(1rem, 2vw)</p>

Fungsi clamp()

clamp(min, preferred, max) membatasi suatu nilai di antara nilai minimum dan maksimum. Nilai pilihan biasanya bersifat fleksibel (seperti vw).

<h1>Clamped Heading</h1>

clamp() untuk Tipografi Fluida

Tipografi fluida dengan clamp() menghilangkan kebutuhan akan beberapa penggantian ukuran fon melalui kueri media:

<h1>Main Heading</h1>
  <h2>Subheading</h2>
  <p>Body copy that scales fluidly with the viewport.</p>

clamp() untuk Spasi Fluida

Terapkan pola yang sama pada spasi untuk mendapatkan margin dan ruang dalam yang responsif secara alami:

<div class="section">Section with fluid padding</div>

min() untuk Wadah

Pola wadah yang aman, yang tidak pernah melebihi lebar maksimum dan tidak pernah menambahkan pengguliran horizontal:

<div class="wrapper">Safe wrapper container</div>

Fungsi Bertingkat

Anda dapat menyusun fungsi perbandingan secara bertingkat untuk membuat ekspresi yang kompleks:

<p class="hero-text">Nested min/max inside clamp()</p>

calc() Dikombinasikan dengan clamp()

Gunakan calc() di dalam clamp() untuk interpolasi fluida yang presisi antara dua ukuran:

<h1>Precise fluid heading</h1>

min-content max-content fit-content

CSS juga memiliki nilai ukuran berupa kata kunci:

  • min-content: ukuran terkecil yang mungkin tanpa luapan
  • max-content: menggunakan ruang sebanyak yang dibutuhkan konten
  • fit-content(): seperti max-content, tetapi dibatasi pada batas yang diberikan
<span class="tag">Tag label</span>

Dukungan Peramban

min(), max(), dan clamp() didukung oleh semua peramban modern. Tidak diperlukan awalan. Fungsi-fungsi ini dapat digunakan di mana pun nilai panjang, frekuensi, waktu, atau angka diharapkan.

Pemeriksaan Singkat

Sebuah judul menggunakan font-size: clamp(1rem, 4vw, 3rem) pada area tampilan selebar 600px. Berapa ukuran fon tersebut?

Ringkasan

min() memilih nilai terkecil, sedangkan max() memilih nilai terbesar. clamp(min, preferred, max) membatasi nilai fluida dalam rentang tertentu. Fungsi-fungsi ini mendukung tipografi dan spasi fluida modern, sehingga sering menghilangkan kebutuhan akan beberapa penggantian melalui kueri media.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Fungsi Min, Max, dan Clamp” gratis?

Ya — teks lengkap “Fungsi Min, Max, dan Clamp” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Fungsi Min, Max, dan Clamp”?

Gunakan min(), max(), dan clamp() untuk ukuran adaptif yang merespons ukuran kontainer atau area pandang. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Fungsi Min, Max, dan Clamp” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Unit Absolut: px, pt, cm
  2. Unit Relatif: em dan rem
  3. Unit Area Pandang: vw, vh, dvh
  4. Fungsi Min, Max, dan Clamp
← Kembali ke CSS Academy