CSS - Unit ukur

Halo teman-teman desainer web masa depan! Hari ini, kita akan melakukan perjalanan menarik melalui dunia unit ukur CSS. Sebagai guru komputer yang ramah di lingkungan Anda, saya di sini untuk mengarahkan Anda melalui aspek penting dari desain web. Jadi, ambilkan rancangannya, dan mari kita mengukur beberapa CSS!

Unit Panjang

Dalam CSS, kita memiliki banyak cara untuk mengukur dan menentukan ukuran. Itu seperti memiliki kotak peralatan penuh dengan rancangannya, masing-masing cocok untuk tugas-tugas tertentu. Mari kita mulai dari dasar:

Unit Panjang Absolut

Ini adalah yang sederhana, seperti inci pada rancangannya:

Unit	Deskripsi
px	Pixel
in	Inci
cm	Sentimeter
mm	Milimeter
pt	Poin
pc	Pica

Berikut adalah contoh sederhana:

.box {
width: 100px;
height: 2in;
margin: 10mm;
}

Dalam kode ini, kita menciptakan kotak yang lebarnya 100 pixel, tingginya 2 inci, dengan margin 10 milimeter di sekitar. Itu seperti membangun kotak karton kecil dan presisi!

CSS Unit Ukur - em Unit

Sekarang, mari bicarakan unit 'em'. Itu adalah unit relatif, berdasarkan ukuran font elemen. Picturing itu seperti chameleon yang mengubah ukurannya berdasarkan lingkungannya.

.parent {
font-size: 16px;
}

.child {
font-size: 1.5em; /* Ini akan 24px */
padding: 2em;     /* Ini akan 48px */
}

Dalam contoh ini, ukuran font anak adalah 1,5 kali ukuran orang tua, dan paddingnya adalah dua kali ukurannya sendiri. Itu seperti boneka Rusia yang bersarang ukuran!

CSS Unit Ukur - ch Unit

Unit 'ch' berdasarkan lebar karakter '0' (nol). Itu sangat berguna untuk menciptakan tata letak kolom dalam font monospace.

.code-block {
width: 80ch;
font-family: monospace;
}

Ini menciptakan blok kode yang lebarnya 80 karakter, sempurna untuk mereka yang nostalgia masa terminal 80-kolom!

CSS Unit Ukur - rem Unit

'rem' adalah singkatan dari "root em". Itu mirip dengan 'em', tapi selalu relatif terhadap elemen root (biasanya

), bukan orang tua.

html {
font-size: 16px;
}

.box {
font-size: 1.5rem; /* Selalu 24px, tanpa menghiraukan orang tua */
padding: 2rem;     /* Selalu 32px */
}

Ini sangat baik untuk menjaga ukuran konsisten sepanjang dokumen Anda, seperti memiliki blueprint master untuk seluruh website Anda.

CSS Unit Ukur - lh dan rlh Unit

'lh' adalah singkatan dari "tinggi baris" elemen, sedangkan 'rlh' adalah "tinggi baris root". Unit ini adalah yang baru, sempurna untuk ritme vertikal dalam tipografi.

.paragraph {
line-height: 1.5;
margin-bottom: 1lh;
}

Ini menyetel margin di bawah paragraf tepat satu tinggi baris, menciptakan ritme vertikal yang harmonis. Itu seperti mengkonduksi orkestra teks!

CSS Unit Ukur - vh Unit dan vw Unit

'vh' dan 'vw' mewakili "tinggi viewport" dan "lebar viewport" masing-masing. Mereka adalah unit persentase berdasarkan ukuran viewport.

.hero {
height: 100vh;
width: 100vw;
}

Ini menciptakan seksi hero yang selalu mengisi keseluruhan layar, tanpa menghiraukan ukuran perangkat. Itu seperti memiliki papan iklan responsif yang selalu pas!

CSS Unit Ukur - vmin (viewport minimum) dan vmax (viewport maksimum) Unit

Unit ini berdasarkan dimensi yang lebih kecil atau lebih besar viewport, tergantung yang sesuai.

.square {
width: 50vmin;
height: 50vmin;
}

Ini menciptakan kotak yang sempurna yang selalu setengah ukuran dimensi viewport yang lebih kecil. Itu seperti memiliki kotak berubah bentuk yang selalu proporsional!

CSS Unit Ukur - vb Unit

'vb' adalah singkatan dari "ukuran blok viewport". Itu mirip dengan 'vh', tapi menghormati mode tulisan dokumen.

.sidebar {
width: 20vb;
}

Ini menciptakan sidebar yang selalu 20% dari dimensi blok viewport, yang sangat baik untuk situs berbahasa berbeda dengan arah tulisan yang berbeda.

CSS Unit Ukur - vi Unit

'vi' adalah "ukuran inline viewport". Itu seperti 'vw', tapi lagi, menghormati mode tulisan.

.header {
height: 10vi;
}

Ini menciptakan header yang selalu 10% dari dimensi inline viewport, menyesuaikan dengan mode tulisan secara mulus.

Contoh - Persentase

Persentase dalam CSS selalu relatif terhadap sesuatu. Mari lihat mereka dalam aksi:

.container {
width: 80%;
margin: 0 auto;
}

.child {
width: 50%;
padding: 5%;
}

Di sini, wadah adalah 80% lebar orang tua, dikelilingi oleh margin otomatis. Anak adalah setengah lebar wadah, dengan padding 5% lebar wadah. Itu seperti boneka Rusia, tapi dengan kotak tak terlihat!

Contoh - Angka

kadang-kadang, properti CSS tidak memerlukan unit sama sekali. Mari lihat beberapa contoh:

.box {
opacity: 0.5;
line-height: 1.5;
z-index: 100;
}

Di sini, opacity adalah nilai antara 0 dan 1, tinggi baris adalah pengganda ukuran font, dan z-index adalah angka untuk urutan stacking. Itu seperti memiliki knop volume, pemisah teks, dan pengurut lapisan semua dalam satu!

Dan itu adalah dia, teman-teman! Kita telah melakukan perjalanan melalui negeri unit ukur CSS, dari pixel yang familiar hingga unit viewport yang eksotik. Ingat, memilih unit yang tepat adalah seperti memilih alat yang tepat untuk pekerjaan - itu bisa membuat hidup Anda mudah dan desain Anda lebih kuat. Jadi, maju dan ukur dengan tanggung jawab!

Credits: Image by storyset