Cara Memilih Unit CSS Terbaik untuk Membuat Tata Letak Situs yang Lebih Baik

Unit CSS adalah salah satu aspek paling mendasar untuk dipertimbangkan saat membuat tata letak situs. Unit-unit ini akan menentukan bagaimana desain Anda akan berinteraksi di berbagai perangkat.

Tapi ketika datang ke unit CSS, ada banyak pilihan untuk dipilih dan semua pilihan tidak sama. Unit CSS tidak terbatas pada font saja, jadi sebagai pengembang front-end, Anda juga harus memahami bagaimana unit ini memengaruhi tata letak.

Dalam artikel ini, kami akan menunjukkan cara kerja unit CSS yang berbeda, sehingga Anda dapat menggunakannya untuk membuat tata letak dan desain situs yang lebih baik.

Jenis Unit CSS

Unit CSS dapat dipisahkan dalam kategori berikut:

• Unit absolut
• Unit relatif font
• Unit relatif viewport

Unit Mutlak

Beberapa unit bergantung pada nilai absolut tertentu dan tidak terpengaruh oleh ukuran layar atau font apa pun. Tampilan unit ini dapat bervariasi tergantung pada resolusi layar yang berbeda, karena bergantung pada DPI (titik per inci) layar.

Unit-unit ini adalah:

• px (piksel)
• dalam inci)
• cm (sentimeter)
• mm (milimeter)
• pc (gambar)
• pt (poin)

Piksel

Piksel adalah unit yang paling umum digunakan dan diterima. Dan itu dianggap sebagai dasar pengukuran untuk banyak unit lainnya. Ini memberikan hasil paling konsisten di antara berbagai perangkat.

Elemen box pada contoh berikut memiliki tinggi 150px dan lebar 150px, dan akan tetap sama di semua ukuran layar.

[css]
.kotak{
tinggi:150px;
lebar:150px;
}
[/css]

Semua unit absolut lainnya seperti dalam (inci), cm (sentimeter), dan mm (milimeter) adalah unit pengukuran dunia nyata dengan kasus penggunaan CSS dunia nyata yang sangat sedikit.

Akan tetapi, masih bagus untuk memahami hubungannya dengan piksel, jadi begini perbandingannya:

• 1in = 96px
• 1cm = 37,8px
• 1 mm = 3,78px

Sedangkan pc (picas) dan pt (poin) berhubungan langsung dengan inci.

• 1in = 72pt
• 1in = 6 buah

Hubungan antara semua unit absolut dapat ditunjukkan seperti ini:

Rem

Terlepas dari piksel, semua unit absolut lainnya memiliki sangat sedikit kasus penggunaan untuk CSS layar, tetapi karena mereka adalah unit pengukuran dunia nyata, mereka dapat digunakan secara efektif dalam CSS cetak. (Jika Anda bertanya-tanya tentang piksel, piksel juga berfungsi dengan baik di CSS cetak!)

Unit relatif font

Ada beberapa unit yang bergantung pada ukuran font atau kumpulan font dokumen atau elemen level induknya. Ini termasuk unit seperti:

• em
• rem
• mantan
• ch

Em

Em adalah satuan panjang relatif; itu tergantung pada ukuran font elemen induk atau dokumen. Secara default, 1em sama dengan 16px jika tidak ada font-size yang ditentukan.

Em mewarisi ukuran dari ukuran font induk langsungnya. Jadi, jika elemen induk memiliki font-size:18px , maka 1em akan diukur sebagai 18px untuk semua anaknya.

Di sini kita memiliki div .post dengan tiga anak, .post-item , dengan judul dan beberapa teks.

[html]
<div class=”post”>
<div class=”post-item”>
<h2>Judul</h2>
Lorem Ipsum hanyalah teks tiruan dari industri percetakan dan penyusunan huruf. Lorem Ipsum telah menjadi teks tiruan standar industri sejak tahun 1500-an
</div>
<div class=”post-item”>
<h2>Judul</h2>
Lorem Ipsum hanyalah teks tiruan dari industri percetakan dan penyusunan huruf. Lorem Ipsum telah menjadi teks tiruan standar industri sejak tahun 1500-an
</div>
<div class=”post-item”>
<h2>Judul</h2>
Lorem Ipsum hanyalah teks tiruan dari industri percetakan dan penyusunan huruf. Lorem Ipsum telah menjadi teks tiruan standar industri sejak tahun 1500-an
</div>
</div>
[/html]

Sekarang parent .post memiliki font-size:20px dan elemen anak .post div memiliki font-size:1.2em sendiri dengan padding:0.75em dan margin:0.75em , jadi padding dan margin yang dihitung akan menjadi 18px (20px *1.2em*0.75em).

[css]
html{
ukuran font:20px;
}

.pos{
ukuran font:20px;
}

.post div{
ukuran font:1.2em;
}

.pasca-item{
latar belakang: merah muda;
bantalan: 0,75em;
margin:0,75em;
}

.pasca-item h2{
ukuran font:1.5em;
margin:0,5em 0;
}

.pasca-item p{
margin:0;
ukuran font: 1em;
}
[/css]

Seperti yang Anda lihat, elemen anak mewarisi nilai dari induknya.

Keuntungan menggunakan em adalah, jika Anda memutuskan untuk mengubah font-size , padding , dan margin setiap elemen secara proporsional, maka Anda hanya perlu mengubah ukuran font elemen induk dan semua elemen lainnya akan menyesuaikannya.

Itu tidak akan terjadi dengan unit absolut seperti px, di mana Anda harus menyesuaikan setiap elemen satu per satu.

Sifat pewarisan ini bisa sedikit rumit untuk dikelola, namun, jika elemen bersarang juga memiliki font-size sendiri.

Seperti pada demo sebelumnya, jika Anda menggabungkan judul dan paragraf di dalam div lain di salah satu item turunan, Anda akan melihat hasil yang aneh.

[html]
<div class=”post-item”>
<div>
<h2>Judul</h2>
Lorem Ipsum hanyalah teks tiruan dari industri percetakan dan penyusunan huruf. Lorem Ipsum telah menjadi teks tiruan standar industri sejak tahun 1500-an
</div>
</div>
[/html]

Karena post-item memiliki nested div , ukuran dasar akan berubah dari 24px menjadi 28.8px (20px*1.2em*1.2em), dan font-size dan margin untuk h2 akan berubah menjadi 43.2px (20px*1.2em*1.2em *1.5em) dan 14.4px (20px*1.2em*1.2em*0.5em), masing-masing.

Rem

Rem bisa sangat membantu dalam situasi seperti ini karena mereka selalu mengacu pada ukuran font elemen akar, bukan elemen induk.

Jika Anda mengambil contoh sebelumnya dan mengubah unit dari em ke rem untuk .post div , Anda akan melihat semua elemen turunan memperbaiki dirinya sendiri.

[css]
.post div{
ukuran font:1.2rem;
}
[/css]

Setelah unit diubah dari em ke rem, basisnya berubah dari div induk menjadi elemen root, yang memiliki front-size:20px .

Jadi, perhitungannya akan menjadi nilai 20px*1.2rem* dan h2 dan p keduanya akan memiliki font-size dan margin yang konsisten, terlepas dari induknya.

Mantan

Ex relatif terhadap tinggi x font saat ini dan sangat jarang digunakan. Pengukuran x-height tidak konsisten; terkadang itu berasal dari font itu sendiri dan terkadang browser menghitung sendiri.

Seperti em dan rem, itu tergantung pada font tetapi perbedaan utamanya adalah ex akan berubah ketika Anda mengubah font-family juga, yang tidak demikian halnya dengan dua lainnya.

[css]
.kotak{
lebar:150ex;
tinggi: 150ex;
}
[/css]

Ch

Ch mirip dengan ex tetapi tidak bergantung pada tinggi-x; bukan pada lebar karakter nol (0). Itu juga berubah dengan font-family .

[css]
.kotak{
lebar: 150ch;
tinggi: 150ch;
}
[/css]

Unit Relatif Viewport

Ada beberapa unit yang bergantung pada ukuran tinggi dan lebar viewport, seperti:

• vh (tinggi viewport)
• vw (lebar viewport)
• vmin (minimum viewport)
• vmax (maksimum viewport)

Vh

Vh (tinggi viewport) diukur sebagai 1vh sama dengan 1% dari tinggi viewport. Unit ini sangat berguna untuk membuat elemen ketinggian penuh. Vh bereaksi mirip dengan persentase, tetapi tidak bergantung pada tinggi elemen induk.

Anda dapat menggunakan vh di mana saja tetapi kasus penggunaan vh yang paling umum adalah untuk membuat elemen tinggi penuh. Dalam contoh ini, kelas full-height akan membuat wadah biru yang tingginya 100% dari viewport.

[css]
.penuh-tinggi{
tinggi: 100vh;
latar belakang: biru;
}
[/css]

Vw

Vw (lebar area pandang) mirip dengan vh tetapi mempertimbangkan lebar, bukan tinggi area pandang. 1vw sama dengan 1% dari lebar viewport. Unit-unit ini bisa sangat membantu jika Anda ingin membuat area pandang yang responsif berdasarkan tipografi.

Dalam contoh ini, font-siz h1 adalah 6% dari lebar area pandang, jadi jika lebar area pandang adalah 1000px, ukuran font akan menjadi 60px, dan jika area pandang adalah 500px, ukuran font akan menjadi 30px.

[css]
h1{
ukuran font:6vw;
}
[/css]

Vmin

Vmin dihitung berdasarkan nilai minimum lebar atau tinggi viewport, mana yang lebih kecil. Katakanlah Anda memiliki ukuran viewport setinggi 1000px dengan lebar 800px. 1vmin akan sama dengan 8px.

Vmaks

Vmax dihitung persis kebalikan dari vmin , di mana nilai maksimum dianggap sebagai viewport.

Seperti contoh viewport sebelumnya dengan tinggi 1000px dan lebar 800px, 1vmax akan sama dengan 10px.

Sekarang mari kita jelajahi bagaimana Anda dapat menggunakan vmin dan vmax secara efektif. Menggunakan contoh kita sebelumnya, katakanlah kita ingin memiliki fluid padding dan margin berdasarkan ukuran viewport sekarang, daripada nilai tetap.

Dalam potongan kode ini, saya mengatur padding ke 3vmax dan margin ke 1.5vmin .

[css]
.pasca-item{
latar belakang merah muda;
padding:3vmax;
margin:1,5vmin;
}
[/css]

Padding dan margin akan berubah sesuai dengan ukuran viewport.

Persentase (%) satuan

Unit persentase (%) tidak termasuk dalam kategori tertentu yang disebutkan di atas, tetapi dapat dikategorikan sebagai unit relatif. Itu relatif terhadap elemen induknya.

Persentase terutama dikaitkan dengan tinggi dan lebar elemen, tetapi dapat digunakan di mana saja di mana satuan panjang CSS diperbolehkan.

Persentase adalah salah satu unit yang paling berguna untuk membuat tata letak yang responsif atau lancar. Kerangka kerja populer seperti Bootstrap, foundation, dan Bulma menggunakan persentase untuk tata letak dasarnya.

Di sini kelas full-width akan memiliki lebar 100% dari elemen induknya.

[css]
.lebar penuh{
lebar: 100%;
}
[/css]

Kesimpulan

Kami telah membahas hampir semua unit CSS yang tersedia untuk digunakan. Bergantung pada tujuan Anda, beberapa akan lebih cocok daripada yang lain. Sebagai pengembang front-end, selalu baik untuk mengetahui opsi Anda karena Anda tidak pernah tahu mana yang mungkin Anda perlukan dalam proyek berikutnya.

Jadi, unit mana yang paling sering Anda gunakan untuk mendapatkan hasil yang diinginkan? Beri tahu kami di bagian komentar di bawah!