Dalam CSS, apa perbedaan antara em dan px?


Jawaban 1:

Pada akhirnya, itu semua piksel

Pada akhirnya, browser web memberi tahu sistem operasi untuk memberi tahu driver tampilan untuk meletakkan sesuatu di layar dalam piksel.

Tapi, "pixel" itu adalah pixel fisik. Itu yang mungkin kita sebut "pixel perangkat".

Anda tidak berbicara tentang "piksel perangkat". Anda sedang berbicara tentang Pixel CSS.

CSS Pixels! == Pixels

"CSS Pixel" kira-kira agak-agak-dekat-dekat dengan piksel perangkat. [1] CSS Pixel bergantung pada gagasan ini tentang "piksel referensi" yang merupakan sudut visual pada perangkat dengan kerapatan piksel 96 dpi pada jarak sekitar satu lengan. [2] Melalui kekuatan matematika, "piksel referensi" dapat berakhir menjadi 1,3 mm di layar. Tapi, ada sejumlah alasan yang mungkin tidak terjadi.

Sangat penting kita mulai dengan titik dasar bahwa px tidak berarti, "pixel on a screen".

Ada berbagai unit pengukuran dalam CSS

Ada dua kategori utama unit pengukuran Anda [3]:

  1. unit absolut unit relatif

jika itu adalah "unit absolut", maka unit pengukuran itu memiliki hubungan dengan sesuatu di dunia fisik.

Jika itu adalah unit relatif, maka nilainya dihitung menjadi unit absolut.

Jadi px vs em

px adalah "unit absolut"; mesin CSS akan memberitahu browser untuk menggunakan "panjang" itu untuk ukuran. Browser dan OS akan memilah-milah bagaimana panjang itu dibandingkan dengan "pixel perangkat" dan membuatnya. Px memiliki hubungan statis dengan "piksel referensi" yang telah kita bicarakan sebelumnya. px itu tidak akan berubah.

em adalah "unit relatif". Mesin CSS akan menghitung nilai itu menjadi panjang piksel terlebih dahulu. Setelah menghitung panjang piksel, itu akan mengirim nilai yang dihitung ke browser. em, khususnya, dihitung berdasarkan ukuran font relatif dari elemen yang mengandung. Nilai mereka dapat berubah; jika Anda mengubah ukuran font elemen induk apa pun, itu akan memengaruhi nilai em.

Cara terbaik untuk memikirkan em adalah berpura-pura bahwa bit em tidak ada, dan memperlakukan nilainya sebagai pengganda. misalnya:

.foo {ukuran font: 1.5em; / * membingungkan * / ukuran font: 1,5; / * Tidak valid, tetapi benar-benar harus dilakukan di tempat menyebutnya em * / line-height: 1,5; / * lihat bagaimana ketinggian garis menerima pengali tanpa unit? * /}

Jadi perbedaan besar pertama adalah bahwa satu mutlak, yang lain relatif.

px dan em dalam aplikasi

Situasi yang berbeda akan menyoroti kekuatan dan kelemahan masing-masing unit [4].

Karena px adalah unit pengukuran absolut, Anda memiliki prediktabilitas tinggi untuk apa yang Anda dapatkan di layar. Tetapi Anda tidak memiliki proporsionalitas; properti berukuran px tidak menghitung ulang jika Anda menyesuaikan ukuran font di induk.

Jadi Anda sering mengalami ini:

body {ukuran font: 16px;} h1 {ukuran font: 32px; / * unit absolut untuk ukuran font * / padding: 8px 16px; / * unit absolut untuk bantalan * /} .foo {font-size: 12px; / * sesuaikan ukuran font dalam induk * /} / * tulis aturan baru untuk menjaga hal-hal proporsional * / .foo h1 {font-size: 24px; / * menulis ulang aturan font untuk membuat h1 2x normal * / padding: 6px 12px; / * menulis ulang untuk 1/4 dan 1/2 * /}

Karena mereka adalah unit relatif berdasarkan ukuran font yang diwarisi, Anda bisa memiliki prediktabilitas rendah untuk apa yang Anda dapatkan di layar — terutama di tim besar. Tetapi Anda akan memiliki proporsionalitas yang tinggi; properti berukuran di em akan menghitung ulang jika Anda menyesuaikan ukuran font di induk.

body {ukuran font: 16px;} h1 {ukuran font: 2em; / * unit relatif * / padding: .25em .5em; / * unit relatif untuk padding * /} .foo {ukuran font: .75em; }

Jadi, Anda sudah menyimpan penulisan seluruh aturan dengan menggunakan em. Ukuran font dihitung menjadi 24px, dan padding dihitung menjadi 6px 12px.

Jadi perbedaan besar adalah kemampuan untuk memiliki ukuran benda secara proporsional - tanpa menulis kode lagi!

Catatan kaki

[1] Sintaks dan tipe data dasar

[2] Nilai dan Unit CSS Level 3

[3] Apa perbedaan "em" "px" dan "%" di CSS?

[4] Situs Web Responsif adalah semua tentang Bagaimana Anda Mengukur (dalam CSS Anda)


Jawaban 2:

px adalah piksel. Mungkin sedikit berbeda di browser yang berbeda, tetapi kemungkinan akan konsisten di lingkungan yang sama dan di seluruh situs pada browser / perangkat yang diberikan. px masuk akal untuk hal-hal seperti garis dan lebar perbatasan.

em sama dengan ukuran font elemen saat ini (yang umumnya diwariskan). Jadi saat ukuran font diubah, nilai em juga berubah. Ini berguna saat Anda ingin memberi spasi pada sesuatu yang relatif terhadap ukuran teks saat ini. Ini juga berguna karena relatif terhadap konten lain, sehingga lebih cenderung bekerja di seluruh layar. em sangat berguna untuk mengatur jarak, margin, dan lapisan di sekitar teks.

rem adalah root em. Sama seperti em, tetapi bukannya relatif terhadap ukuran font saat ini, itu relatif terhadap ukuran font dokumen asli. Ini berarti bahwa rem akan tetap konsisten di seluruh halaman, terlepas dari font saat ini. Dalam banyak situasi, rem lebih mudah digunakan karena rem lebih mudah diprediksi. Terutama masuk akal untuk margin yang perlu tetap konsisten di seluruh dokumen bahkan ketika ukuran font lokal berubah antar elemen.

Umumnya em dan rem lebih mudah dipertahankan dalam satu halaman, dan konsensus umum saat ini adalah menggunakan em dan rem daripada px. Konsensus umum tidak selalu benar, tetapi ini adalah cara yang baik untuk pergi kecuali Anda memiliki alasan yang baik untuk melakukan sesuatu yang lain.


Jawaban 3:

px adalah piksel. Mungkin sedikit berbeda di browser yang berbeda, tetapi kemungkinan akan konsisten di lingkungan yang sama dan di seluruh situs pada browser / perangkat yang diberikan. px masuk akal untuk hal-hal seperti garis dan lebar perbatasan.

em sama dengan ukuran font elemen saat ini (yang umumnya diwariskan). Jadi saat ukuran font diubah, nilai em juga berubah. Ini berguna saat Anda ingin memberi spasi pada sesuatu yang relatif terhadap ukuran teks saat ini. Ini juga berguna karena relatif terhadap konten lain, sehingga lebih cenderung bekerja di seluruh layar. em sangat berguna untuk mengatur jarak, margin, dan lapisan di sekitar teks.

rem adalah root em. Sama seperti em, tetapi bukannya relatif terhadap ukuran font saat ini, itu relatif terhadap ukuran font dokumen asli. Ini berarti bahwa rem akan tetap konsisten di seluruh halaman, terlepas dari font saat ini. Dalam banyak situasi, rem lebih mudah digunakan karena rem lebih mudah diprediksi. Terutama masuk akal untuk margin yang perlu tetap konsisten di seluruh dokumen bahkan ketika ukuran font lokal berubah antar elemen.

Umumnya em dan rem lebih mudah dipertahankan dalam satu halaman, dan konsensus umum saat ini adalah menggunakan em dan rem daripada px. Konsensus umum tidak selalu benar, tetapi ini adalah cara yang baik untuk pergi kecuali Anda memiliki alasan yang baik untuk melakukan sesuatu yang lain.