Apa itu klem () di CSS (dan bagaimana menggunakannya)

Jika Anda pernah mencoba membuat situs Anda terlihat bagus di kedua ponsel dan monitor raksasa, Anda telah melihat bagaimana jarak istirahat, font menyusut secara drastis atau skala berlebihan, dan elemen -elemen baik membanjiri atau menghilang. Untuk memperbaiki semua itu, Anda akhirnya menulis daftar panjang kueri media untuk satu tata letak. Di situlah klem () dapat membantu.

Ini adalah fungsi CSS yang menyederhanakan ukuran pengaturan. Alih -alih mendefinisikan beberapa nilai pada breakpoint tetap, ini memungkinkan Anda mengatur minimum, yang disukai, dan maksimum sehingga elemen Anda skala lancar saat layar berubah. Bagian terbaiknya adalah mereka tetap berada dalam batas yang Anda tentukan, jadi tidak ada inkonsistensi tata letak.

Dalam posting ini, kami akan menjelaskan bagaimana Clamp () bekerja, mengapa seringkali bisa lebih efisien daripada kueri media, dan bagaimana Divi 5 memungkinkan Anda menggunakannya tanpa menulis satu baris kode!

Apa itu klem ()

Clamp () adalah fungsi asli dalam CSS, yang digunakan untuk mendefinisikan nilai responsif yang menyesuaikan berdasarkan ukuran layar. Alih -alih hardcoding satu nomor, Anda memberikan rentang browser untuk bekerja dengan - Anda menetapkan nilai minimum, nilai pilihan yang dapat diskalakan, dan nilai maksimum. Ini membuat tata letak Anda lebih fleksibel, dan Anda tidak perlu menulis beberapa kueri media untuk setiap ukuran layar.

Mari kita pahami ini dengan contoh ukuran font cairan yang meningkat/berkurang berdasarkan ukuran layar.

font-size: clamp(40px, 7vw, 100px);

Di sini, ukuran font tidak akan pernah naik di bawah 40px, skala berdasarkan 7% dari lebar viewport, dan berhenti tumbuh begitu mencapai 100px.

Manfaat besar lain dari menggunakan Clamp () adalah bahwa, tidak seperti kueri media, ia menghindari lompatan yang kaku dan menjaga gaya Anda lebih mudah diprediksi dan dibaca.

Apa yang kita maksud dengan ini? Mari kita pahami ini dengan membandingkan Clamp () dengan kueri media.

Membandingkan klem () & kueri media

Kueri media adalah cara umum lain untuk menyesuaikan ukuran font untuk lebar layar yang berbeda. Di sini, Anda mendefinisikan breakpoint pada lebar layar tertentu di mana gaya Anda berubah. Misalnya, Anda dapat menetapkan satu ukuran font untuk desktop, yang lain untuk tablet, dan yang ketiga untuk ponsel sedemikian rupa sehingga ukuran font hanya berubah ketika lebar layar mengenai setiap breakpoint.

Metode ini berfungsi, tetapi tidak cair. Antara 1000px dan 501px, ukuran font tetap terkunci pada 100px. Saat layar mencapai 500px, font tiba -tiba turun menjadi 30px. Ini berarti tidak ada transisi yang mulus, hanya perubahan yang tajam.

Jadi, jika Anda ingin membuat penskalaan terasa lebih alami, Anda harus menambahkan beberapa breakpoint dan secara manual menyesuaikan ukuran font di masing -masing. Itu akan membuat kode Anda panjang dan kembung.

Sebaliknya, Clamp () menyelamatkan Anda dari transisi mendadak dan kode panjang. Faktanya, dapat ditulis dalam satu baris: ukuran font: klem (30px, 7vw, 100px).

Ini memberitahu browser untuk skala font antara 30px dan 100px berdasarkan 7 persen dari lebar viewport. Ukuran font menyesuaikan dengan lancar di semua ukuran layar tanpa lompatan tiba -tiba atau kebutuhan untuk beberapa breakpoint. Anda masih menentukan batas, tetapi penskalaan di antaranya otomatis dan lebih konsisten.

Dalam Live Action, inilah perbandingan antara font mengubah ukuran breakpoint kueri media dan klem () terlihat:

Untuk mengubah ukuran responsif, klem () membuat perbedaan yang nyata. Daripada menunggu lebar layar tetap untuk memicu perubahan gaya, ia merespons setiap piksel di antaranya. Ini membuat kode Anda lebih bersih dan desain Anda lebih konsisten di semua perangkat. Selain itu, ini banyak didukung oleh sebagian besar browser modern, yang berarti ia akan membuat dengan baik di browser ini , menjadikannya pengganti yang andal dan praktis.

Bagaimana klem () berfungsi di balik layar

Clamp () mengambil tiga nilai yang bekerja bersama untuk mengukur properti CSS apa pun:

 clamp(minimum, preferred, maximum) 

Setiap bagian dari fungsi memiliki peran spesifik:

• Nilai minimum: Nilai serendah mungkin. Elemen tidak akan skala di bawah titik ini, tidak peduli seberapa kecil layar.
• Nilai Pilihan: Skala nilai ini berdasarkan ukuran layar. Biasanya diatur menggunakan unit relatif seperti VW atau ekspresi calc () untuk memungkinkan fluiditas bebas.
• Nilai maksimum: ukuran yang diizinkan tertinggi. Bahkan di layar yang sangat besar, elemen tidak akan melebihi nilai ini.

Ketika browser menghitung ukuran akhir, ia mengevaluasi nilai yang disukai terlebih dahulu. Browser menggunakan minimum jika ukuran layar cukup kecil sehingga nilai yang disukai turun di bawah minimum. Demikian pula, jika layar cukup lebar sehingga nilai yang disukai melebihi maksimum, ia tetap dengan itu.

Ini membuat perilaku dapat diprediksi. Anda selalu tahu desain Anda akan tetap berada dalam kisaran yang Anda tentukan, tetapi Anda mendapatkan penskalaan yang fleksibel di antara batas -batas tersebut. Dengan menetapkan batas minimum dan maksimum, klem () memastikan skala elemen Anda dengan lancar tetapi tidak pernah terlalu banyak. Cukup.

Memilih nilai yang lebih disukai

Anda mungkin telah memperhatikan bahwa nilai yang disukai (yang tengah) memainkan peran yang lebih besar dalam semua ini. Itu memutuskan bagaimana skala elemen.

Pertama, seharusnya tidak menjadi nilai tetap seperti klem (40px, 80px , 120px) karena dalam hal ini, nilai yang disukai tidak skala sama sekali. Karena 80px sudah jatuh di antara batas, browser menguncinya dan mengabaikan perubahan ukuran layar. Ini menghasilkan nilai statis, yang mengalahkan tujuan menggunakan Clamp () di tempat pertama.

Sebaliknya, nilai yang lebih disukai harus selalu relatif , seperti dalam klem (40px, 7vw , 120px). Di sini, 7VW menanggapi lebar viewport, yang memungkinkan elemen untuk skala dengan lancar di seluruh ukuran layar. Fungsi klem kemudian memastikan tidak pernah berada di bawah 40px atau di atas 120px, menjaga ukurannya responsif terhadap 7% dari lebar layar.

Anda juga perlu mempertimbangkan ukuran nilai relatif. Misalnya, nilai yang lebih kecil seperti 2VW menskalakan elemen lebih bertahap di seluruh ukuran layar, sedangkan nilai yang lebih besar seperti 6VW menyebabkan penskalaan yang lebih cepat dan mencapai ukuran maksimum lebih cepat. Untuk mengidentifikasi penskalaan mana yang cocok untuk Anda, cobalah kalkulator skala jenis fluida. Ini memungkinkan Anda mempratinjau nilai yang berbeda dan mengekspor CSS siap pakai.

CATATAN: Kalkulator Tipe Fluida Output nilai VI. Jika Anda menggunakan output yang dihasilkan di Divi, pastikan untuk mengubah unit VI menjadi VW.

Berbagai jenis unit dalam klem ()

Unit di dalam klem () memengaruhi cara berperilaku lintas perangkat. Inilah semua yang dapat Anda gunakan:

Dalam kebanyakan kasus, pengembang menggunakan PX untuk nilai minimum dan maksimum dan unit fluida seperti VW untuk nilai yang disukai. Ini memberikan keseimbangan terbaik antara kontrol dan responsif.

Namun, Anda juga dapat menggunakan unit relatif untuk nilai min dan maks, seperti klem (2rem, 4rem, 8rem). Ini membuat desain Anda lebih mudah diakses dan lebih mudah untuk diukur jika ukuran font root berubah. Ini sangat berguna bagi pengguna yang menyesuaikan pengaturan browser untuk keterbacaan.

klem () dalam Divi 5

Fungsi klem () dalam CSS sangat berguna, tetapi hanya jika Anda nyaman menulis kode. Bagaimana dengan mereka yang lebih suka membangun situs web mereka secara visual tanpa menyentuh stylesheet? Apakah Anda ingin membuat tata letak cairan menggunakan Clamp () tetapi tanpa menulis kode?

Jika demikian, unit canggih Divi 5 dapat membantu.

Berlangganan saluran YouTube kami

Singkat cerita, Divi 5 mendukung Clamp () sebagai unit canggih di seluruh pembangun, dan sangat mudah untuk mengaksesnya. Di mana pun Anda dapat memasukkan nilai numerik, seperti ukuran font, jarak, atau lebar bagian, Anda akan menemukan opsi untuk menggunakan Clamp () secara langsung.

Cukup klik di bidang input untuk memilih dari berbagai unit canggih yang tersedia di Divi 5 (lihat daftar berwarna gelap di sebelah ukuran teks heading) , ubah jenis unit, dan tentukan nilai minimum, lebih disukai, dan maksimum Anda.

Dan itu saja! Tidak ada pengkodean atau CSS sama sekali - yang Anda lakukan hanyalah memasuki nilai klem (), dan tajuk Anda menjadi cairan seperti itu.

Divi 5 memudahkan untuk membuat desain yang cair dan responsif tanpa menulis CSS khusus. Anda mendapatkan semua fleksibilitas klem () dengan kesederhanaan editor visual. (Divi 5 mendukung banyak unit canggih lainnya, termasuk Clamp ()).

Pelajari segalanya tentang unit canggih Divi 5

Bagaimana cara menggunakan clamp () di Divi 5?

Sekarang, Anda telah melihat betapa mudahnya menggunakan klem () di Divi 5. Anda cukup memilih unit klem () dan menambahkan nilai yang Anda sukai. Tidak ada kode khusus, tidak ada file CSS, hanya antarmuka visual yang bersih.

Tapi apa yang membuat Clamp () benar -benar kuat di dalam Divi bukan hanya fungsi itu sendiri. Itu yang kerjanya.

Divi 5 dibangun di sekitar sistem desain modular. Ini berarti Anda dapat menggabungkan klem () dengan fitur -fitur canggih lainnya seperti variabel desain dan fungsi CSS seperti calc () untuk membuat tata letak Anda tidak hanya responsif tetapi juga konsisten dan mudah dikurangi. Dan di situlah menarik - Divi 5 memudahkan klem () ke dalam alur kerja Anda.

Clamp () bekerja dengan variabel desain

Cara terbaik, paling efisien untuk menggunakan klem () secara efektif di Divi 5 adalah dengan menggabungkannya dengan variabel desain.

Variabel desain memungkinkan Anda mendefinisikan nilai -nilai global (seperti tipografi, warna, dan bahkan ukuran font) sehingga Anda dapat menggunakannya di seluruh situs Anda agar tetap konsisten. Anda juga dapat menyimpan nilai klem () sebagai variabel angka. Ini memungkinkan Anda untuk menghemat nilai global yang responsif sehingga ketika Anda mengubahnya, semua contoh diperbarui sekaligus.

Misalnya, Anda mendefinisikan ukuran klem () untuk judul H1-H6 seperti ini:

Dan simpan di dalam manajer variabel di Divi Builder:

Maka semua judul Anda di seluruh situs web akan beradaptasi berdasarkan nilai klem () yang Anda tentukan.

Sekarang, jika Anda ingin memperbarui ukuran H3, cukup modifikasi variabel nomornya, dan itu akan diperbarui di mana pun Anda menggunakannya. ( Ingin membuat sistem tipografi Anda sendiri di Divi 5? Berikut panduan lengkap tentang pengelolaan font dan ukuran font menggunakan klem () dan variabel desain.)

Pendekatan ini memungkinkan kontrol terpusat, membuatnya mudah untuk memperbarui pengaturan tipografi secara global tanpa secara manual menyesuaikan setiap instance. Dengan menerapkan variabel klem () ini melalui preset grup opsi, Anda merampingkan proses desain Anda.

klem () digabungkan dengan calc ()

Anda juga dapat menggunakan fungsi calc () di dalam clamp () untuk menyempurnakan bagaimana skala nilai Anda. Ini sangat berguna ketika Anda ingin menambahkan ukuran dasar dan kemudian skala lebih tepat dengan unit relatif seperti VW.

Misalnya, ukuran font: klem (1rem, calc (0,75rem + 2VW), 2.5rem) menggunakan calc () untuk menambahkan basis yang stabil (0,75rem) dan kemudian skala lebih lanjut dengan 2VW.

Ini memungkinkan font untuk skala berdasarkan lebar viewport, tetapi juga memberikannya awal dengan ukuran font dasar. Ini berguna untuk menjaga keterbacaan pada layar yang lebih kecil tanpa perlu beberapa variasi klem. Trik calc () di dalam klem () sangat cocok untuk di mana pun Anda menginginkan kontrol ekstra atas bagaimana hal -hal skala.

Kasus Penggunaan Praktis Clamp ()

Sekarang mari kita lihat beberapa kasus penggunaan umum klem () dan betapa mudahnya saat Anda menerapkannya dengan Divi 5:

1. Ukuran heading yang konsisten di semua perangkat

Tipografi responsif adalah kasus penggunaan klem () terbaik. Karena kami telah mendefinisikan ukuran heading (H1-H6) kami menggunakan Clamp () dalam variabel desain, saatnya untuk melihatnya beraksi.

Kami membuat halaman ini menggunakan H5S untuk item menu. Kemudian, kami menerapkan variabel angka H5 untuk masing -masing ukuran teks heading H5. Dan seperti yang Anda lihat, masing -masing tajuk berskala melintasi breakpoint.

Teks tetap jelas, seimbang, dan konsisten secara visual di semua breakpoint responsif yang kami tentukan.

Anda juga dapat menggunakan klem () untuk tinggi saluran dan jarak huruf. Ini membantu mempertahankan keterbacaan yang optimal dengan sedikit meningkatkan celah garis atau jarak saat layar semakin luas. Perubahan kecil, tetapi itu akan membuat konten bentuk panjang terasa lebih bernapas.

2. Set Clamp () lebar untuk bagian paragraf di layar besar

Paragraf secara alami mudah dibaca di ponsel, karena baris pendek dalam layar ringkas membuat konten dapat dicerna. Namun, pada monitor ultra-lebar, para pembaca akan dipaksa untuk memindai seluruh baris horizontal jika bagian lebar penuh memperluas teks terlalu jauh. Rasanya seperti membaca papan iklan. Panjang garis yang ideal dari sebuah kalimat adalah sekitar 50-75 karakter, jadi jika situs web Anda menampilkan kalimat tanpa akhir di layar lebar, Anda mungkin kehilangan minat pembaca.

Untuk memperbaikinya, atur lebar responsif seperti klem (300px, 65VW, 800px) untuk skala paragraf Anda ke lebar tetap (800px) sehingga paragraf tampak dapat dibaca bahkan pada layar yang lebih luas.

Ini adalah cara yang sempurna untuk membuat posting blog Anda dapat dibaca di layar yang lebih luas.

3. Set Clamp () lebar untuk gambar tunggal atau unggulan

Demikian pula, gambar tunggal (seperti gambar unggulan) dapat tampak terlalu besar di layar ultra-lebar. Ini terlihat sempurna pada tablet, tetapi dapat meregangkan canggung pada monitor 4K, yang dapat terasa terlalu kuat dibandingkan dengan sisa konten.

Untuk memperbaikinya, gunakan lebar gambar berbasis penjepit seperti klem (300px, 60VW, 1000px). Ini memastikan gambar tumbuh dengan lancar dengan ukuran layar tetapi berhenti sebelum mendominasi tata letak.

Atau yang lain, Anda bisa mengatur lebar klem () untuk seluruh baris wadah untuk memastikan semua elemen (gambar, tajuk, dan teks) skala secara seragam.

4. Tambahkan padding cairan & margin dengan klem ()

Desainer sering mendapatkan jarak yang tepat untuk desktop, tetapi tidak selalu bekerja dengan baik di layar yang lebih kecil atau sangat besar. Memperbaiki padding dan margin tidak selalu menyesuaikan dengan ukuran layar. Di situlah Clamp () menjadi berguna.

Misalnya, margin penjepit (0,5rem, 2VW, 2REM) dan bantalan penjepit (1REM, 3VW, 4REM) di galeri gambar membuat spasi yang dimulai dari kecil dan skala dengan layar.

Ini memberi ruang tata letak Anda untuk bernafas di layar besar dan menjaga hal -hal yang ketat di ponsel:

Clamp () juga membantu skala bantalan dengan lancar di sekitar tata letak kartu, galeri gambar, wadah bagian, dan blok teks, terutama ketika Anda menginginkan jarak yang disengaja tanpa tweaking breakpoint yang konstan.

5. Buat bagian pahlawan responsif yang skala mulus

Menggunakan klem (), Anda dapat membuat bagian pahlawan terlihat sempurna di setiap layar dengan mendefinisikan heading pahlawan, bantalan tombol, dan jarak subtitle. Kami telah menyimpan nilai klem () ini sebagai variabel desain untuk menyederhanakan aplikasi mereka. (Tetapi Anda tidak ingin mengisi manajer variabel Anda dengan menyimpan setiap detail menit.)

Menerapkan nilai -nilai itu sekarang mudah.

Setelah disimpan, masing -masing akan secara otomatis beradaptasi dengan ukuran layar untuk memberikan bagian pahlawan Anda kesan pertama yang sempurna di setiap perangkat.

Desain tata letak piksel-sempurna menggunakan clamp (), tanpa menulis satu baris kode tunggal

Clamp () membantu Anda merancang cairan, tata letak responsif tanpa mengandalkan kueri media yang tak ada habisnya. Dan dengan Divi 5, Anda tidak perlu menulis satu baris kode untuk menggunakannya. Apakah Anda lebih suka mengkode atau menikmati desain visual, unit canggih Divi membuat penerapan klem () ke font dan jarak lebih mudah.

Dengan fitur -fitur kuat seperti Clamp () yang mudah diakses, tidakkah Anda ingin mencoba Divi 5 untuk diri sendiri? Uji nilai yang berbeda, buat sistem responsif Anda sendiri, dan lihat seberapa fleksibel tata letak Anda. Dan ketika Anda memiliki trik klem () favorit, bagikan di komentar di bawah! Kami ingin melihat apa yang Anda buat.