Menguasai Desain Web Responsif Dengan Fungsi Matematika CSS

Matematika itu bagus, matematika itu hebat, tetapi apakah Anda ingin menghabiskan waktu Anda membuat perhitungan ketika style sheet Anda bisa melakukannya untuk Anda?

CSS hadir dengan tiga fungsi matematika praktis yang akan mengubah cara Anda mendesain situs web Anda. Kami akan menunjukkan kepada Anda bagaimana dan mengapa Anda harus menggunakannya.

Memperkenalkan Matematika ke CSS

CSS sebagian besar bersifat deklaratif, tetapi revisi telah memperkenalkan fungsi ke bahasa. Sekarang ada banyak fungsi dalam spesifikasi, dan tiga fungsi matematika paling sederhana terbukti sangat berguna: calc, max, dan min.

Anda dapat gunakan contoh CodePen sederhana ini untuk membantu mengikuti panduan.

CSS calc() Fungsi Matematika

Fungsi CSS calc() melakukan perhitungan sederhana dan menggunakan hasilnya sebagai nilai properti. Ini berarti Anda dapat menetapkan nilai dinamis ke properti seperti tinggi dan lebar, semuanya tanpa CSS @media kueri.

Fungsi ini mendukung penjumlahan (+), perkalian (*), pengurangan (-), dan pembagian (/) dengan satu operator.

Contoh: Membuat Spasi Merata di Seluruh Ukuran Layar

Membuat halaman web terlihat sama pada ukuran yang berbeda bisa jadi sulit, bahkan jika Anda menggunakan unit CSS dinamis seperti vw dan %. Fungsi CSS calc() mengubah ini.

Seperti yang Anda lihat pada gambar di atas, bilah judul yang melintasi layar memiliki jarak yang berbeda tergantung pada ukuran layar. Ini karena kita telah mengatur lebar ke 80vw, mengatur jarak ke 20vw; sebuah nilai variabel.

Jika kita menggunakan calc() sebagai gantinya, kita dapat mengatur jarak agar sama di semua ukuran layar. Properti yang kami gunakan untuk ini terlihat seperti ini:

lebar: kalk (100vw - 400px);

Ini menetapkan lebar bilah judul kita menjadi 400px kurang dari lebar halaman, menciptakan jarak yang rata berapa pun ukuran tampilannya.

CSS max() Fungsi Matematika

Fungsi CSS max() memilih nilai tertinggi dari kumpulan untuk menambahkan nilai ke properti CSS. Anda dapat menambahkan nilai potensial sebanyak yang Anda suka, dengan masing-masing dipisahkan dengan koma, tetapi hanya akan menggunakan nilai tertinggi.

Contoh: Membatasi Tinggi Bilah Navigasi

Salah satu tantangan utama yang datang dengan desain web responsif adalah orientasi. Situs yang berfungsi pada monitor komputer potret besar juga perlu terlihat bagus di layar ponsel potret yang lebih kecil.

Ini dapat membuat nilai properti terlihat bagus di desktop dan buruk di seluler, seperti yang ditunjukkan gambar di atas. Bilah navigasi kami memiliki ketinggian yang ditetapkan 10vh, tetapi ini membuat bilah terlihat tipis di perangkat desktop.

Kita dapat menggunakan fungsi CSS max() untuk mengatasi masalah ini:

tinggi: maks (10vh, 80px);

Dengan menambahkan aturan seperti ini, kita dapat mengatur ketinggian minimum 80px untuk bilah navigasi kita, sambil mempertahankan nilai 10vh jika lebih tinggi.

CSS min() Fungsi Matematika

Fungsi min() seperti fungsi max(), tetapi memilih nilai terendah dari kumpulan untuk digunakan sebagai nilai properti.

Contoh: Mengatur Ukuran Teks Maksimum

Apakah Anda menggunakan nilai dinamis atau tidak, mendapatkan ukuran teks tepat di seluruh platform bisa rumit. Kita dapat menggunakan fungsi CSS min() untuk menetapkan dua atau lebih nilai properti potensial untuk ukuran teks header utama kita, dan itu akan menggunakan yang terkecil.

Menggunakan sebuah ukuran font: 10vh; property pada teks header utama dalam contoh kita membuat teks terlihat bagus di desktop, tetapi terlalu besar di perangkat seluler.

Untuk mengubahnya, Anda dapat menggunakan fungsi CSS min() untuk memberikan ukuran alternatif:

ukuran font: min (10vh, 10vw);

Contoh ini berfungsi karena tampilan seluler tinggi dan tipis, sedangkan monitor desktop lebar dan pendek. Ini berarti unit lebar tampilan (vw) lebih kecil di seluler daripada di desktop.

Menggunakan Matematika untuk Desain Web Responsif

Fungsi matematika yang sudah dikemas sebelumnya dengan CSS menawarkan cara unik untuk menghasilkan situs web yang responsif dengan mudah. Anda hanya perlu mengaturnya dengan benar untuk memulai.

Tentu saja, ada metode dan fungsi CSS lain yang dapat Anda gunakan untuk membuat situs tampak hebat di berbagai platform.

Cara Membuat Bilah Navigasi Responsif Menggunakan HTML dan CSS

Baca Selanjutnya

Tentang Penulis