Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
apa perbedaan ukuran rem, em, vh, dan vw ?
developer yang baik itu, membuat website atau aplikasi bukan buat dirinya sendiri, tetapi juga buat usernya. Nah, itulah yang melatar belakangi pentingnya responsive design. User jaman now, devicenya sangat beragam, dari yang pake smartphone, tablet, ipad,layar full-hd, bahkan ada yang pake layar 4k. Oleh karena itu, design UI kita ga boleh terpaku hanya pada satu device saja. Jadilah kita bertemu dengan css unit yang agak membingungkan, ada "em", "rem", "vw", dan "vh".
Sebelumnya kita perlu tahu, bahwa CSS unit itu terbagi menjadi dua macam, yaitu Absolute unit dan relative unit. Contoh absolute unit adalah pixel, cm, mm, inch. Kita akan bahas lebih dalam ke relative unit aja, ada beberapa macam seperti contohnya em, rem, vh, vw.
Apa sih relative unit itu ? jadi gini relative itu maksudnya, ukurannya bergantung dengan sesuatu yang lain, kaya kecantikan atau kegantengan, cieee. Nah itu tergantung dari yang menilai. Sama kaya unit di CSS juga gitu . Misalnya vw itu tergantung sama viewport width, jadi klo viewport widthnya kecil, ya beda hasilnya sama yang viewportnya besar. Jadi intinya, setiap relative unit pasti punya ketergantungan. Sekarang kita jelasin satu persatu apasih ketergantungan dari masing2 CSS unit tersebut.
Unit measurement EM
1em memiliki nilai yang sama dengan "font-size" saat kita assign em unit. misal :
p {
font-size: 16px;
border: 0.5em solid black;
}
maka 0.5 em disini = 0.5 * 16 px = 8px.
pada kasus lainnya misal :
<head>
<style>
.container {font-size: 20px;}
.isi-container {padding: 2em;}
</style>
</head>
<body>
<div class="container">
<span class="isi-container">Isi kontainer</span>
<span> cek 234 </span>
</div>
<body>
Kira-kira berapa besar padding class "isi-container" ? Kita ngga assign besar font-size di dalam class "isi-container", tapi "isi-container" bakal inherit font-size dari parentnya yaitu 20px. Oleh sebab itu, padding 2em disini = 2 * 20px = 40px. Temen-temen bisa bermain-main codepen saya, temen-temen bisa ubah-ubah sendiri valuenya disini <a href=' https://codepen.io/danangyudhatama/pen/BmrvaN '> https://codepen.io/danangyudhatama/pen/BmrvaN </a>
Coba hapus "font-size"-nya class "container", maka akan ada perubahan lagi, kalo sekarang berapa font-sizenya kalau begitu ? Setelah dihapus, maka font-sizenya inherit dari root HTML, yang defaultnya 16px. maka kali ini paddingnya 2em = 2 * 16px = 32 pixel.
Unit measurement REM
EM sama REM ini bersaudara, bedanya juga cuma sedikit, kalau EM bergantung pada "font-size" saat ini, sedangkan REM bergantung pada root HTML element. Defaultnya 16 px. jadi kalau font-size html element ngga kita ubah maka 1rem = 16px. Tapi kita bisa aja ubah sesuai keinginan kita, contoh :
html {
font-size: 62.5%;
}
Dari kode diatas maka font-size dari html element sudah diubah menjadi 62.5% * 16px = 10px. Mengubah font-size menjadi 62.5% ini sangat recommended, karena saat ini 1rem = 10 px. jadi kita gausah pusing2 ngitung matematikanya. Misal kita pengen 20 px, ya dengan mudah, pasti setara dengan 2rem. Bayangkan kalau font-sizenya masih default. Berapa rem jika outpunya pengen 20px ? susah kan ? 20px/16px = 1.25 rem.
Rem ini ga peduli dimanapun dia berada dia bakal refer(bergantung) sama root html font-size.Nnamanya juga "rem" yang kepanjangannya adalah "root" em.
Saya juga ada contoh untuk em dan rem disini : <a href=' https://codepen.io/danangyudhatama/pen/KyoGjO '> https://codepen.io/danangyudhatama/pen/KyoGjO </a>
Silakan teman-teman bermain-main dengan codenya disana.
Tersisa dua unit measurement lagi vw dan vh
Kali ini digabung aja, karena sebenernya mereka sama tapi berbeda.Jjadi 1vw ini setara dengan 1% dari viewport width atau lebar viewport. Gampangnya lebar viewport dipotong-potong jadi 100 bagian, maka itu adalah 1vw. Misal lebar viewport kita 1000px maka 1vw = 10px. untuk vh pada dasarnya sama saja, cuma vh bergantung pada viewport height atau tinggi viewport.
Untuk lebih jelasnya bisa dicek disini : <a href=' https://codepen.io/danangyudhatama/pen/aVYPVP '> https://codepen.io/danangyudhatama/pen/aVYPVP </a>
Jangan lupa mainkan lebar dan tinggi viewportnya biar paham.
Barangkali saya ada salah, mohon diluruskan, Kalau teman-teman ada pertanyaan jangan segan untuk bertanya dikolom komentar. thanks !
5 Jawaban:
Akan lebih bagus kalau artikelnya diperbaiki lagi. Karena tanda bacanya nabrak semua dan saya bingung membacanya. Tetapi, konten yang dibahas ini menarik. Saya sudah kasih coto ya. ;)
Salam kenal.
nabrak semua maksudnya gimana gan ? btw makasih cotonya ! :)
Sama" gan. Maksud saya setelah tanda baca titik semestinya huruf berikutnya adalah huruf kapital. Oh iya, saya masih bingung sama vh dan vw. Mereka sama" di set di property height ya seperti contoh codepen di atas.
.container6 {
height: 50px;
width: 90vh; // memang di sini ya? Saya kira kalau vh di assign nya di property height
background: green;
}
@satyakresna oh itu bebas mau dipake dimana aja, ukuran font juga bisa kok pake vw atau vh, cuma itu bukan best practice. Semua CSS Unit diatas itu artinya satuan ukur, sama aja kaya meter, jengkal, cm, kaki.. bedanya dia relative terhadap "hal" tertentu. Eh, jengkal juga relative loh btw, relative sama yang punya tangan. Cuma satuan jengkal ga diakui aja sama siapa2.. hehehe
oh itu ga huruf besar ya, ok deh ntar diedit :) thx masukannya
@wandifrog thx gan :) semoga manfaat buat yang lainnya juga