Css sizing : Pixel atau Persen?

Untuk pembuatan design dari sebuah web kita perlu menerapkan ukuran pada suatu elemen. Namun terkadang kita bingung menggunakan satuan pixel (px) atau persen(%). Mari kita ulas.

Pixel = Fixed
Pemberian nilai pixel pada suatu elemen akan menghasilkan nilai baku pada elemen tersebut, baik Ukuran ( width dan height)  jarak (margin), box model (margin, padding, border, outline) semua akan bernilai tetap. Jadi jika windows di resize ke ukuran berapapun ukuran elemen akan tetap.

Percent = Fluid
Untuk penggunaan persen pada suatu elemen akan bersifat fluid (acuan ada pada windows) jadi jika windows di resize ke ukuran berapapun elemen tersebut akan mengikuti windows (karena pengukuran berdasar berapa %ukuran windows atau elemen parent nya).
Misal suatu elemen misalkan Header di beri property { width: 100% }
Maka ukuran Header tadi akan selalu 100% mengikuti ukuran windows.
Penggunaan persen sangat berguna untuk pembuatan design yang responsive.

Jadi sudah lebih paham tentang px dan %?

Post a Comment

8 Comments