Menggunakan min () dan max () di Divi 5 untuk membuat tata letak yang cerdas

CSS min () dan max () adalah dua fungsi serbaguna namun kurang dimanfaatkan dalam desain web yang responsif, dan Divi 5 memiliki dukungan penuh untuk keduanya sejak pembaruan unit canggih. Sementara kami sebelumnya telah mengeksplorasi tipografi fluida dengan klem () dan perhitungan dinamis dengan calc (), min () dan max () memberi Anda cara yang lebih sederhana untuk mencapai desain yang responsif.

Dalam posting ini, kami akan menunjukkan kepada Anda cara menggunakan fungsi -fungsi ini menggunakan Divi (Divi 5 siap untuk Anda gunakan di situs web baru, dengan rekomendasi untuk migrasi untuk situs yang ada segera hadir). Apa pun yang dapat Anda lakukan untuk menggunakan fungsi responsif akan mengurangi ketergantungan Anda pada kueri media, CSS adalah hal yang indah!

CSS min () dan max (): tata letak yang lebih cerdas dengan logika yang lebih sederhana

Jika Anda sudah menjelajahi klem (), Anda setengah jalan untuk menguasai min () dan max ()! Jika Anda ingat, clamp () menggunakan tiga nilai secara bersamaan (min, lebih disukai, dan maks), min dan maks di clamp () adalah konsep yang sama tetapi dengan hanya 1/3 logika pada waktu tertentu.

Apa yang dilakukan min () dan max ()?

Fungsi min () dan max () memungkinkan Anda mengatur dua atau lebih nilai, dengan yang terkecil (min) atau yang terbesar (maks) ditampilkan berdasarkan ukuran layar.

"Titik transisi" ditentukan masing -masing untuk dua nilai yang Anda tetapkan, jadi ini hanya untuk tujuan visualisasi

min (): selalu memilih nilai yang lebih kecil

Gunakan min () untuk mencegah layar lebar dari peregangan konten secara berlebihan. Ini sangat ideal untuk tata letak yang seharusnya tidak tumbuh terlalu lebar di layar besar tetapi harus memiliki banyak fleksibilitas untuk skala ke bawah karena ukuran layar semakin kecil.

 width: min(100%, 500px); 

Dalam contoh ini, lebar elemen tidak akan pernah melebihi 500px tetapi akan 100% jika berada di bawah tanda 500px.

max (): selalu memilih nilai yang lebih besar

Gunakan max () untuk mencegah konten menjadi terlalu sempit atau kecil, terutama pada layar yang lebih kecil atau ketika konten membutuhkan ukuran minimum agar tetap dapat dibaca atau fungsional. Ini sangat ideal untuk tata letak yang seharusnya tidak menyusut melampaui titik tertentu pada layar kecil (nilai tetap) tetapi dapat diperluas untuk mengakomodasi ruang yang lebih besar (dengan nilai relatif).

 width: max(80%, 300px); 

Dalam contoh ini, lebar elemen akan selalu menjadi opsi yang lebih besar: 80% dari wadahnya atau 300px. Pada layar yang lebih kecil atau dalam wadah ketat, jika 80% menghitung menjadi kurang dari 300px, elemen ini masih akan memiliki lebar setidaknya 300px. Pada layar yang lebih besar, elemen akan meluas hingga 80% dari lebar wadah, tetapi tidak pernah menyusut di bawah 300px. Pendekatan ini membantu memastikan elemen tetap dapat digunakan pada layar kecil sambil meningkatkan skala secara responsif pada yang lebih besar.

Mengapa menggabungkan nilai relatif dan tetap dalam min () dan max ()?

Ketika Anda pertama kali bertemu min () atau max () di CSS, Anda mungkin bertanya -tanya mengapa mereka sering menggabungkan nilai -nilai seperti persentase dan piksel. Itu karena setiap jenis unit memainkan peran yang berbeda dalam desain responsif.

Misalnya, min (100px, 200px) akan selalu sembuh menjadi 100px. Ini hanya memilih yang terkecil dari dua nilai tetap. Tetapi ketika Anda mencampur unit, seperti min (100%, 500px), Anda memberi tahu browser: "Gunakan mana yang lebih kecil antara 100% dari lebar orang tua dan 500px." Ini membuatnya responsif.

Unit relatif seperti %, VW, dan EM menyesuaikan berdasarkan konteks - apakah itu elemen induk, viewport, atau ukuran font yang diwariskan. Unit tetap seperti PX tetap konstan di CSS, membuatnya dapat diprediksi.

Dengan menggabungkan nilai tetap dan relatif, min () dan max () memungkinkan Anda membangun desain fleksibel yang beradaptasi sambil tetap menegakkan batas ukuran.

Cara menggunakan min () dan max () dengan divi

Sekarang kita telah membahas dasar -dasar min () dan max (), mari kita bahas beberapa contoh.

1. Lebar baris responsif dengan bidang yang lebih sedikit

Anda selalu dapat mengatur lebar dan lebar maksimal pada elemen kontainer dengan divi. Tetapi dengan membuka fungsi CSS seperti min () dan max () Anda dapat melakukan hal yang sama tetapi menggunakan satu bidang desain yang lebih sedikit (dan output sedikit lebih sedikit CSS di halaman Anda juga).

Di Divi, jika Anda pergi ke elemen (dalam kasus kami, baris), tab desain , dan kemudian untuk ukuran , Anda akan menemukan beberapa opsi untuk menyesuaikan lebar. Dengan membuat lebar 95% dan mengatur lebar maksimal ke 900px, Anda memiliki sesuatu yang terlihat bagus di perangkat seluler tetapi juga memberi Anda tata letak dengan banyak ruang negatif di kiri dan kanan untuk tampilan desktop.

Ini seperti menggunakan CSS seperti ini untuk baris:

 .container {
width: 95%;
max-width: 900px;
} 

Dengan unit canggih Divi 5, Anda sekarang memiliki opsi lain yang lebih terkonsolidasi. Anda dapat memasukkan semua yang Anda butuhkan hanya dalam bidang lebar dan mencapai hasil yang sama.

Ini seperti menggunakan CSS ini pada wadah baris:

 .container {
width: min(95%, 900px);
} 

Ini adalah satu baris CSS versus dua baris. Lebih penting lagi, itu membutuhkan satu langkah dan nilai lebih sedikit setiap kali Anda menggunakan min () alih -alih mengatur lebar dan lebar maks. Salah satu opsi mencapai hasil yang sama seperti yang ditunjukkan dalam video ini:

Kasing penggunaan khusus ini tidak terlalu menarik, tetapi menunjukkan kekuatan min () dan max () dan bagaimana ia dapat menggantikan deklarasi CSS yang lebih lama.

Saat menggunakan min () atau max () untuk jarak, ukuran, atau perbatasan (mereka dapat digunakan pada lebih banyak bidang di Divi 5), saya sangat menyarankan agar Anda mengaturnya di preset grup opsi atau preset elemen. Dengan cara ini, Anda bisa mendapatkan penskalaan yang konsisten di mana pun Anda menggunakannya.

2. Padding baris dan lebar perbatasan

Di bawah ini, saya memiliki desain yang menjamin lebih banyak bantalan dalam dan lebar perbatasan yang lebih besar karena ukuran layar semakin besar. Untuk mengakomodasi ini, saya telah menggunakan fungsi max () untuk mengatur lebar batas kanan/kiri/atas/bawah dan bantalan pada baris. CSS akan menjadi sesuatu seperti ini:

 .container {
padding: max(10px, 2vw) max(10px, 2vw) max(10px, 2vw) max(10px, 2vw);
border-width: max(5px, 1vw) max(5px, 1vw) max(5px, 1vw) max(5px, 1vw);
} 

Ini berarti bahwa fungsi max () akan memilih mana yang lebih besar dalam situasi apa pun yang diterapkan. Bantalan terkecil di setiap sisi adalah 10px dan yang terbesar adalah 2VW. Demikian pula, untuk lebar perbatasan, yang terkecil yang pernah ada adalah 5px, dan yang terbesar adalah 1VW).

Inilah seperti apa () dalam situasi ini dalam desain> spasi> padding di baris di divi:

Inilah yang tampak seperti max () dalam situasi ini dalam desain> perbatasan>lebar perbatasandi baris di divi:

Bersama -sama, saya mendapatkan efek memiliki lebih sedikit bantalan di bagian dalam baris dan lebar perbatasan yang lebih tipis pada layar yang lebih kecil. Tapi itu berskala karena ukuran layar menjadi lebih besar dan nilai VW (ingat, itu adalah nilai relatif) menjadi lebih besar dari nilai piksel tetap.

Ini membantu memaksimalkan ketersediaan layar yang lebih kecil, sementara layar yang lebih luas dapat mengisi ruang lebih banyak.

3. Bagian Pahlawan Tinggi Penuh

Menggunakan nilai min () pada ketinggian bagian, Anda dapat membuat bagian pahlawan yang setidaknya memiliki ketinggian tertentu tetapi sebaliknya cocok dengan 90% dari tinggi layar penuh (dan tidak lebih) menggunakan fungsi min () sederhana.

 height: min(800px, 90vh) 

Ini memiliki efek memiliki bagian pahlawan setinggi penuh kecuali pada layar yang lebih besar (lebih tinggi), yang kemudian akan menunjukkan bagian berikutnya di bawahnya. Dalam pengaturan ukuran divi, ini dapat dilakukan dengan dua input bidang yang berbeda (lebar dan lebar maks), tetapi menggunakan fungsi min (), kita bisa mendapatkan efek yang sama hanya menggunakan satu bidang dalam ukuran.

Ini menjaga bagian Pahlawan sebagai hal utama untuk sebagian besar ukuran layar tetapi tidak menjadi terlalu besar dalam beberapa contoh dengan resolusi layar yang lebih tinggi.

4. Ukuran font

Menggunakan min atau max untuk ukuran font dapat membantu Anda mencapai ukuran yang lebih dinamis daripada nilai piksel statis. Untuk ini, Anda ingin menggunakan max () untuk meningkatkan ukuran font berdasarkan kondisi ukuran layar. Atur nilai piksel/REM ke ukuran absolut kecil yang ingin Anda gunakan dan menggunakan nilai relatif untuk skala ke atas.

1Rem sama dengan ukuran font root (biasanya 16px kecuali disesuaikan dalam gaya situs Anda); Ukuran font max (1rem, 2VW) akan mengambil yang lebih besar dari dua nilai dan tidak akan pernah lebih kecil dari 16px.

Seperti yang Anda lihat, pada perangkat terkecil, ukuran font diatur ke 1rem/16px. Pada titik tertentu, nilai yang lebih besar menjadi 2VW dan berskala ukuran font ke atas, membuat font lebih besar saat ukuran layar menjadi lebih besar.

Untuk ukuran font, saya tidak merekomendasikan menggunakan min atau max melainkan klem (). Min/max hanya memberi Anda penskalaan dinamis hanya dalam satu arah, dan untuk mendekati efek klem (), Anda harus mengatur aturan ukuran font min/max Anda di beberapa breakpoint (yang mungkin tetapi jauh lebih mudah untuk hanya menggunakan klem).

Perbedaan antara min ()/max () dan clamp ()

Anda dapat memahami klem () sebagai kombinasi min () dan max () dengan nilai yang disukai di antaranya. Clamp () mengambil satu nilai untuk batas minimum, satu nilai sebagai batas maksimum, dan nilai ketiga (di tengah) sebagai nilai yang disukai yang menentukan kemiringan perubahan antara min dan maks Anda.

Contoh:

 font-size: clamp(16px, 4vw, 40px); 

Ini berarti ukuran font yang Anda pengaturan tidak akan pernah lebih kecil dari 16px atau lebih besar dari 40px. Namun, laju perubahan (berdasarkan ukuran layar) ditentukan oleh nilai yang disukai di pusat.

Baca artikel khusus saya tentang menggunakan clamp () untuk melihat generator tipografi fluida pilihan saya yang menciptakan fungsi klem () Anda untuk Anda.

Coba min () dan max () dengan Divi 5

Min () dan max () mungkin tidak mendapatkan perhatian sebanyak klem () atau calc (), tetapi mereka adalah alat penting untuk desain responsif yang lebih pintar, lebih sederhana, dan lebih bersih di Divi 5.

Fungsi CSS ini memberi Anda cara unik untuk mengontrol respons situs web Anda. Setelah Anda mengerti kapan menggunakan min () dan max (), Anda akan bertanya -tanya bagaimana Anda mengelola desain responsif tanpa mereka. Mereka sepenuhnya didukung di seluruh browser modern, dan Divi membuat menerapkannya langsung. Divi 5 siap digunakan di situs web baru.