Dengan banyaknya perangkat seluler di pasaran, kami dibanjiri dengan ukuran viewport. Itu membuatnya sangat menantang untuk merancang situs web yang sepenuhnya responsif.
Kueri media CSS telah lama menjadi alat bantu. Namun semakin sulit untuk memperhitungkan resolusi layar yang berkembang. Jika perangkat gagal mencocokkan rentang viewport yang telah Anda tetapkan, hasilnya mungkin kurang dari ideal.
Di situlah CSS clamp() dapat memberikan dampak positif. Itu tidak bergantung pada ukuran viewport yang telah ditentukan sebelumnya. Sebagai gantinya, ini memberikan rentang nilai dan memungkinkan browser web untuk menskalakan elemen sesuai kebutuhan.
clamp() tidak serta merta menggantikan kebutuhan akan kueri media. Tapi itu mungkin mengurangi jumlah gaya yang kita tempatkan di dalamnya.
Berikut ini adalah contoh dasar caranya clamp() dapat digunakan untuk menghasilkan desain responsif yang lebih baik. Mari kita mulai!
Apa itu penjepit CSS ()?
Konsep dari clamp() bisa sedikit membingungkan. Tapi dipreteli ke dasar, itu menyediakan cara untuk menggabungkan min() Dan max() berfungsi menjadi garis tunggal.
Jadi, sebelum kita melangkah lebih jauh, penting untuk diperhatikan clamp() adalah sarana untuk menetapkan nilai minimum dan mactionmum untuk suatu elemen. Itu bisa berupa teks, ukuran wadah, atau apa saja yang perlu responsif.
Garis tipikal dapat terlihat seperti ini:
font-size: clamp(1.125rem, 2vw, 1.5rem);
Perhatikan nilai pertama dan terakhir. Pada kasus ini, 1.125rem adalah minimum nilai, sementara 1.5rem berfungsi sebagai mactionmum.
Masih bersama kami? Besar! Sekarang, tentang bajingan di tengah itu…
Angka tengah di atas (2vw) adalah milik kita disukai nilai. MDN mendefinisikannya sebagai: “Nilai yang disukai adalah ekspresi yang nilainya akan digunakan selama hasilnya berada di antara nilai minimum dan mactionmum.”
Dengan demikian, kita dapat menganggapnya sebagai perbatasan antara dua negara. Pindah ke kiri, dan Anda berada di Portugal, di mana nilai minimum berlaku. Ke kanan, dan Anda berada di Spanyol, di mana mactionmum akan digunakan.
Nilai yang disukai dapat berupa angka konstan atau a ekspresi matematis. Hal ini memungkinkan kontrol halus atas cara penghitungannya.
Tapi kembali ke contoh kita. Mengambil isyarat dari dokumentasi MDN, ukuran font kami pada awalnya akan ditetapkan 1.125rem.
Namun, setelah nilai pilihan kami 2vw adalah lebih besar dibandingkan 1.125remteks kita akan ditingkatkan hingga mactionmum 1.5rem.
Dalam praktiknya, layar kecil akan melihat nilai minimum, sedangkan layar besar mendapatkan nilai mactionmal. Nilai yang disukai hanya menetapkan ambang batas.
Beberapa Contoh Dasar dari clamp()
Sekarang kita tahu lebih banyak tentang apa clamp() tidak, mari kita lihat dalam tindakan. Berikut ini adalah contoh yang mendemonstrasikan kemampuan dasar fungsi.
Tipografi Cairan Yang Menyesuaikan dengan Ukuran Layar
Membuat gaya responsif untuk teks bisa jadi rumit. Tetap menggunakan ukuran desktop mungkin terlihat berlebihan di perangkat seluler. Namun menerapkan ukuran baru untuk setiap kueri media CSS berarti lebih banyak pemeliharaan. Dan mendapatkan penskalaan yang tepat bisa jadi menyebalkan.
Untungnya, tipografi cair adalah area di mana CSS clamp() unggul. Fungsi ini memungkinkan teks untuk diskalakan berdasarkan parameter yang telah Anda tetapkan. Yang terbaik dari semuanya, satu baris kode menggantikan apa yang biasanya membutuhkan banyak instance.
Di sini, kami telah mengatur kami body Dan h2 teks ke skala berdasarkan viewport. Area pandang yang besar akan melihat font yang lebih besar. Sementara itu, teks menyusut sesuai pada layar yang lebih kecil.
Kita body teks akan ditampilkan antara ukuran minimum dan mactionmum yang ditentukan (1.125rem – 1.5rematau 18px – 24px). Itu h2 teks memiliki min/maks 2rem – 2.75rem (32px – 44px).
Lihat Pena CSS clamp() Demo – Heading & Body Text oleh Eric Karkovack
Kontainer yang Menyesuaikan Area Pandang Besar
Saat berhadapan dengan wadah responsif, kita tidak bisa melupakan layar besar. 1080p (1920×1080) sekarang berfungsi sebagai resolusi minimum untuk perangkat desktop dan laptop. Oleh karena itu, penting untuk mempertimbangkan bagaimana tata letak memengaruhi pengguna ini.
Penampung yang merentang lebar penuh area pandang bisa merepotkan – terutama jika berisi teks. Memiliki terlalu banyak karakter per baris membuat teks lebih sulit dibaca di layar besar. Padahal konfigurasi ini lebih diinginkan di ponsel.
Contoh ini menggunakan clamp() untuk meningkatkan pengalaman pengguna di seluruh area pandang. Layar kecil, di mana nilai mactionmal kami 90vw adalah lebih besar dari kami 1100px nilai yang disukai, akan menerima wadah yang luas.
Di layar besar, penampung akan ditampilkan sesuai nilai yang diinginkan. Ini seharusnya membuat membaca lebih mudah.
Yang juga perlu diperhatikan adalah nilai minimum kami sebesar 40vw. Itu hanya berperan pada area pandang yang sangat besar. Nilainya dapat ditingkatkan jika Anda ingin melihatnya terpicu lebih cepat.
Lihat Pena CSS clamp() Demo – Lebar Wadah oleh Eric Karkovack
clamp() Bawah pada Gaya Responsif Anda
Saat CSS berevolusi, CSS memberi kita alat yang lebih canggih. Mereka sering meningkatkan efisiensi dan mendorong lebih banyak “pekerjaan kotor” ke browser. clamp() pasti cocok dengan cetakan ini.
Dalam hal ini, itu berarti memiliki lebih sedikit kode untuk dipelihara. Dengan mengurangi jumlah gaya yang kami tempatkan ke dalam kueri media, clamp() membuat pekerjaan kita lebih mudah. Selain itu, desain kami tetap terlihat bagus di seluruh perangkat – bahkan perangkat dengan area pandang yang unik.
Yang terbaik dari semuanya, itu didukung di semua browser modern. Oleh karena itu, ini adalah sesuatu yang dapat langsung Anda tambahkan ke alur kerja Anda.
Untuk mempelajari lebih lanjut, silakan periksa sumber daya di bawah ini!
