Apa perbedaan antara ptdan pxdalam CSS? Yang mana yang harus saya gunakan dan mengapa?

px ≠ Piksel

Semua jawaban ini tampaknya salah. Berlawanan dengan intuisi, dalam CSS px bukan piksel . Setidaknya, tidak dalam pengertian fisik yang sederhana.

Baca artikel ini dari W3C , EM, PX, PT, CM, IN… , tentang bagaimana pxunit "ajaib" ditemukan untuk CSS. Arti pxbervariasi oleh perangkat keras dan resolusi. (Artikel itu segar, terakhir diperbarui 2014-10.)

Cara berpikir saya sendiri tentang hal itu: 1 px is the size of a thin line intended by a designer to be barely visible.

Mengutip artikel itu :

Unit px adalah unit ajaib CSS. Ini tidak terkait dengan font saat ini dan juga tidak terkait dengan unit absolut. Unit px didefinisikan sebagai kecil tetapi terlihat, dan sedemikian rupa sehingga garis lebar 1px horizontal dapat ditampilkan dengan tepi yang tajam (tanpa anti-aliasing). Apa yang tajam, kecil dan terlihat tergantung pada perangkat dan cara penggunaannya: apakah Anda mendekatkannya ke mata Anda, seperti ponsel, selebar lengan, seperti monitor komputer, atau di suatu tempat di antaranya, seperti buku? Px dengan demikian tidak didefinisikan sebagai panjang konstan, tetapi sebagai sesuatu yang tergantung pada jenis perangkat dan penggunaannya yang khas.

Untuk mendapatkan gambaran tentang penampilan px, bayangkan monitor komputer CRT dari tahun 1990-an: titik terkecil yang dapat ditampilkan berukuran sekitar 1/100 inci (0,25mm) atau sedikit lebih. Unit px mendapatkan namanya dari piksel layar tersebut.

Saat ini ada perangkat yang pada prinsipnya dapat menampilkan titik-titik tajam yang lebih kecil (walaupun Anda mungkin perlu kaca pembesar untuk melihatnya). Tetapi dokumen dari abad terakhir yang menggunakan px dalam CSS masih terlihat sama, apa pun perangkatnya. Printer, khususnya, dapat menampilkan garis-garis tajam dengan detail yang jauh lebih kecil dari 1px, tetapi bahkan pada printer, garis 1px terlihat sangat mirip dengan yang terlihat pada monitor komputer. Perangkat berubah, tetapi px selalu memiliki tampilan visual yang sama.

Artikel itu memberikan beberapa panduan tentang penggunaan ptvs pxvs em, untuk menjawab Pertanyaan ini.

Di sini Anda punya penjelasan yang sangat rinci tentang perbedaan mereka

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

Intinya (dari sumber)

Pixel adalah unit berukuran tetap yang digunakan dalam media layar (yaitu untuk dibaca di layar komputer). Pixel adalah kependekan dari "elemen gambar" dan seperti yang Anda tahu, satu piksel adalah satu "kotak" kecil di layar Anda. Poin biasanya digunakan dalam media cetak (apa pun yang akan dicetak di atas kertas, dll.). Satu titik sama dengan 1/72 inci. Poin mirip piksel, karena merupakan satuan ukuran tetap dan tidak dapat menskala ukuran.

Lihat artikel yang sangat bagus ini di CSS-Trik:

• px - em -% - pt - kata kunci

Diambil dari artikel:

pt

Unit pengukuran terakhir yang memungkinkan untuk menyatakan ukuran font adalah nilai-nilai titik (pt). Nilai poin hanya untuk CSS cetak! Titik adalah unit pengukuran yang digunakan untuk tipografi tinta-di-kertas kehidupan nyata. 72pts = satu inci. Satu inci = satu inci kehidupan nyata seperti pada penguasa. Bukan inci pada layar, yang benar-benar sewenang-wenang berdasarkan resolusi.

Sama seperti bagaimana piksel mati-akurat pada monitor untuk ukuran font, ukuran titik juga mati-akurat di atas kertas. Untuk hasil lintas-browser dan lintas-platform terbaik saat mencetak halaman, atur lembar gaya cetak dan ukuran semua font dengan ukuran titik.

Untuk ukuran yang baik, alasan kami tidak menggunakan ukuran titik untuk tampilan layar (selain tidak masuk akal), adalah bahwa hasil lintas-browser sangat berbeda:

px

Jika Anda membutuhkan kontrol berbutir halus, ukuran font dalam nilai piksel (px) adalah pilihan yang sangat baik (ini adalah favorit saya). Di layar komputer, itu tidak mendapatkan lebih akurat daripada satu piksel. Dengan ukuran font dalam piksel, Anda benar-benar memberi tahu peramban untuk merender huruf tepat dengan jumlah piksel tersebut:

Windows, Mac, alias, anti-alias, cross-browser, tidak masalah, font yang ditetapkan pada 14px akan setinggi 14px. Tapi bukan berarti tidak akan ada variasi. Dalam pengujian cepat di bawah ini, hasilnya sedikit lebih konsisten daripada dengan kata kunci tetapi tidak identik:

Karena sifat nilai piksel, mereka tidak mengalir. Jika elemen induk memiliki ukuran piksel 18px dan anak adalah 16px, anak tersebut akan menjadi 16px. Namun, pengaturan ukuran font dapat menggunakan kombinasi. Sebagai contoh, jika orang tua diatur ke 16px dan anak diatur ke lebih besar, anak memang akan keluar lebih besar dari orang tua. Tes cepat menunjukkan kepada saya ini:

"Lebih besar" menabrak 16px induk menjadi 20px, peningkatan 25%.

Pixel telah mendapatkan bungkus buruk di masa lalu karena masalah aksesibilitas dan kegunaan. Di IE 6 dan di bawah, ukuran font yang diatur dalam piksel tidak dapat diubah ukurannya oleh pengguna . Itu berarti bahwa kita para desainer muda yang sehat dapat mengatur jenis dalam 12px dan membacanya di layar dengan baik, tetapi ketika orang-orang sedikit lebih lama di gigi pergi untuk memperbesar ukuran sehingga mereka dapat membacanya, mereka tidak dapat. Ini benar-benar kesalahan IE 6, bukan milik kami, tetapi kami mendapatkan apa yang kami dapatkan dan kami harus menghadapinya.

Mengatur ukuran font dalam pixel adalah metode yang paling akurat (dan saya menemukan yang paling memuaskan), tetapi pertimbangkan jumlah pengunjung yang masih menggunakan IE 6 di situs Anda dan kebutuhan aksesibilitasnya. Kami benar di tepi berdarah tidak perlu peduli tentang ini lagi.

Pt adalah 1/72 inci dan merupakan ukuran yang tidak berguna untuk apa pun yang diberikan pada perangkat yang tidak menghitung DPI dengan benar. Ini menjadikannya pilihan yang masuk akal untuk mencetak dan pilihan yang mengerikan untuk digunakan di layar.

Px adalah piksel, yang akan dipetakan ke piksel layar dalam banyak kasus.

CSS menyediakan banyak unit lain, dan unit mana yang harus Anda pilih bergantung pada ukuran pengaturan Anda.

Piksel sangat bagus jika Anda perlu mengukur sesuatu agar sesuai dengan gambar, atau jika Anda ingin batas tipis.

Persentase bagus untuk ukuran font karena, jika Anda menggunakannya secara konsisten, Anda mendapatkan ukuran font yang proporsional dengan preferensi pengguna.

Ems sangat bagus ketika Anda menginginkan suatu elemen untuk mengukur sendiri berdasarkan ukuran font (sehingga paragraf mungkin menjadi lebih luas jika ukuran font lebih besar)

… dan seterusnya.

pt adalah derivasi (singkatan) dari "point" yang secara historis digunakan pada permukaan tipe cetak di mana ukurannya biasanya "diukur" dalam "points" di mana 1 point memiliki pengukuran perkiraan 1/72 inci, dan dengan demikian 72 font titik berukuran 1 inchi.

px adalah kependekan dari "pixel" yang merupakan "dot" sederhana pada layar atau printer dot matrix atau printer atau perangkat lain yang merender dalam mode dot - berbeda dengan mesin ketik lama yang memiliki ukuran tetap, striker kokoh yang meninggalkan jejak karakter dengan menekan pita, sehingga meninggalkan gambar dengan ukuran tetap.

Yang terkait erat dengan titik adalah istilah "huruf besar" dan "huruf kecil" yang secara historis berkaitan dengan pemilihan karakter tipografi tetap di mana karakter "captital" di mana ditempatkan dalam kotak (case) di atas karakter yang tidak ditangkap yang ditempatkan dalam kotak di bawah ini, dan dengan demikian huruf "bawah".

Ada kotak yang berbeda (kasus) untuk font dan ukuran tipografi yang berbeda, tetapi masih dan huruf "atas" dan "lebih rendah" untuk masing-masing.

Istilah lain adalah "pica" yang merupakan ukuran dari satu karakter dalam font, sehingga pica adalah 1/6 inci atau 12 unit satuan ukuran (12/72) ukuran.

Secara garis besar pengukurannya ada pada komputer 4.233mm atau 0.166in sedangkan titik lama (Amerika) adalah 1/72.27 inci dan Perancis adalah 4.512mm (0.177in). Demikian pernyataan saya tentang "perkiraan" tentang pengukuran.

Selanjutnya, mesin ketik seperti yang digunakan di kantor, memiliki ukuran baik "Elite" atau "Pica" di mana ukurannya 10 dan 12 karakter per inci secara repectivly.

Selain itu, "titik", sebelum standarisasi didasarkan pada ukuran "kaki" tipografi logam, ukuran jejak dasar satu karakter, dan ukurannya bervariasi.

Perhatikan bahwa "kaki" tipografi berasal dari kaki sebenarnya printer yang sudah meninggal. Kaki tipografi mengandung 72 picas atau 864 poin.

Mengenai penggunaan CSS, saya lebih suka menggunakan EM daripada px atau pt, sehingga mendapatkan keuntungan penskalaan tanpa kehilangan lokasi dan ukuran relatif.

EDIT: Hanya untuk kelengkapan Anda dapat menganggap EM (em) sebagai elemen ukuran satu font tinggi, sehingga 1em untuk font 12pt akan menjadi tinggi font itu dan 2em akan dua kali tinggi itu. Perhatikan bahwa untuk font 12px, 2em adalah 24 piksel. SO 10px biasanya 0,63 em font standar sebagai browser "paling" berdasarkan 16px = 1 em sebagai ukuran font standar.