Satuan Pada CSS
Satuan CSS digunakan untuk menentukan nilai untuk berbagai properti seperti ukuran, margin, padding, dan posisi. Satuan pada CSS yang digunakan adalah:
| Unit | Absolute/Relative | Berdasarkan | Pengalaman User Bergantung pada |
|---|---|---|---|
| px (piksel) | Absolute | Piksel | Kepadatan layar (ppi), tulisan akan berukuran tetap sesuai piksel yang diinginkan, tapi tampilan yang dilihat user akan berbeda tergantung ppi pada perangkat yang digunakan. |
| em (eM Square) | Relative | Besar huruf | Besar huruf dari elemen induk (parent). satuan ini memang menggunakan ukuran persegi sekitar huruf sebagai acuan. dalam tipografi, dikenal sebagai EM Square, yaitu ukuran yang dihabiskan huruf M untuk membentuk persegi. Misal font-size pada induk dibuat 20px, maka 1em adalah 20px, 10em adalah 200px. ini biasa digunakan untuk menaruh button yang ukurannya menyesuaikan tulisan yang ada di dalamnya. |
| rem | Relative | Besar huruf | Besar huruf dari elemen root (biasanya <html>) |
| % | Relative | Ukuran elemen induk | Ukuran elemen induk |
| vw | Relative | Ukuran viewport | Lebar viewport (jendela pada perangkat yang dilihat). Artinya ukuran elemen yang dibuat dengan satuan vw, vh, vmin, vmax akan berubah sesuai ukuran layar/ jendela browser. |
| vh | Relative | Ukuran viewport | Tinggi viewport |
| vmin | Relative | Ukuran viewport | Nilai paling kecil dari lebar berbanding tinggi viewport. bila layar berukuran 960x1280, maka akan digunakan 960px sebagai acuan. bila tertulis 0.5vmin, maka elemen akan berukuran 480px |
| vmax | Relative | Ukuran viewport | Nilai paling besar dari lebar berbanding tinggi viewport. |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example using rem</title>
<style>
html{
font-size: 16px;
}
body {
font-size: 16px;
}
.rect1 {
display: flex;
align-items: center;
justify-content: center;
width: 160px;
height: 160px;
background-color: #007bff;
font-size: 1rem;
}
.rect2 {
display: flex;
align-items: center;
justify-content: center;
width: 10em;
height: 10em;
background-color: #7b00ff;
font-size: 1em;
}
</style>
</head>
<body>
<div class="rect1">
ABC
</div>
<div class="rect2">
DEF
</div>
</body>
</html>
Komentar
Posting Komentar