Persentase atau Piksel untuk tata letak?

Apa yang akan Anda gunakan untuk tata letak halaman web? Persentase atau piksel?
Kapan satu harus menggunakan satu di atas yang lain?

web-development design websites

— ACP
sumber

Tidak juga - gunakan mereka ;-)

— Armand

(Itu "mereka" istilah tipografi, bukan "mereka" tag HTML, kalau-kalau ada yang boggles.)

— Frank Shearar

@Alison: bukankah maksud Anda "Tidak - gunakan em s"?

— Alan Pearce

Platform target? Yang jelas akan menjadi persentase, tetapi sayangnya karena sebagian besar aset grafis Anda tidak akan menskala dengan baik, saya akan merekomendasikan piksel

— dvhh

Hmmmm @lan kamu mungkin benar :—)

— Armand

Jawaban:

Unit apa yang Anda gunakan bergantung sepenuhnya pada apa yang ingin Anda capai. Unit yang paling banyak digunakan dalam tata letak web adalah:

px - absolut; satu piksel
pt - absolut; 1/72 inci, sekitar 1,3px untuk media layar
em - relatif terhadap ukuran font induk; 1.0em = ukuran karakter (lebar huruf besar M)
% - relatif terhadap orangtua

Anda menggunakan px untuk ukuran yang tetap konstan, misalnya perbatasan 1px.
Anda menggunakan em untuk ukuran yang harus mengikuti ukuran font, misalnya margin 3,0em.
Anda menggunakan% untuk ukuran yang harus mengambil persentase dari induknya, misalnya lebar 50%.

Untuk tata letak halaman web Anda biasanya menggunakan piksel atau persentase tergantung pada apakah Anda ingin tata letak tetap (piksel) atau tata letak berbasis cairan (persentase).

— Guffa
sumber

Sedikit nit untuk dipilih: em adalah lebar, bukan tinggi, dari huruf M dalam tipografi tradisional. Tidak mengherankan, en adalah lebar huruf besar N. Sebuah ex adalah ukuran tinggi berdasarkan karakter.

— Stan Rogers

@Stan Rogers: Saya tidak pernah mengatakan bahwa itu adalah puncak huruf besar M, ada orang lain yang mengeditnya.

— Guffa

Yang penting adalah bahwa informasi yang diberikan adalah benar karena kita dapat membuatnya, bukan siapa yang menaruhnya di sana. (Saya belum dapat mengedit jawaban non-wiki orang lain, jadi komentar adalah yang terbaik yang bisa saya lakukan.)

— Stan Rogers

Ukuran Poin tidak mutlak kecuali Anda tahu resolusi pasti dari perangkat output dan faktor skala yang telah ditetapkan pengguna (UI independen-resolusi, 'font besar' XP, dll.). Juga, iPhone 4 adalah 326 dpi, yang jauh lebih dari 72dpi

— JBRWilkinson

@ JBRWilkinson: Ini adalah ukuran absolut untuk perangkat apa pun. Ini mutlak seperti unit px; ukuran piksel juga berbeda untuk setiap tampilan yang diberikan.

— Guffa

Saya cenderung menggunakan piksel untuk deklarasi lebar (yang umumnya diperbaiki), tetapi mereka untuk ketinggian. Dengan cara itu tata letak berubah ukuran secara vertikal - tetapi mempertahankan konsistensi horisontal.

— sunwukung
sumber

Saya menggunakan ukuran relatif / proporsional bila memungkinkan. Saya merasa lebih mudah untuk membuat perubahan pada tata letak nanti. Juga, menggunakan ukuran relatif terhadap elemen induk berarti perubahan ke induk dengan mudah menetes ke bawah.

Secara tradisional, menggunakan ukuran relatif juga memungkinkan halaman terlihat benar dalam berbagai resolusi dan terutama bermanfaat untuk pembesaran browser atau ukuran font minimum. Tetapi browser modern sekarang menangani pengubahan ukuran dengan sangat baik dengan tata letak khusus piksel, bahkan memperbesar gambar seperlunya. Jadi menjadi kurang penting untuk menggunakan ukuran relatif.

— Matt S
sumber