Saya dengar Anda harus menentukan ukuran dan jarak dalam stylesheet Anda dengan mereka, bukan dalam piksel. Jadi pertanyaannya adalah mengapa saya harus menggunakan mereka daripada px saat mendefinisikan gaya dalam css? Apakah ada contoh bagus yang menggambarkan hal ini?

Adalah salah untuk mengatakan bahwa yang satu adalah pilihan yang lebih baik daripada yang lain (atau keduanya tidak akan diberikan tujuan mereka sendiri dalam spesifikasi). Bahkan mungkin perlu dicatat bahwa StackOverflow menggunakan banyak unit px. Itu bukan pilihan buruk Spoike diberitahu itu.

Definisi unit

• px adalah unit pengukuran absolut (seperti dalam , pt , atau cm ) yang juga merupakan 1/96 dari unit in (lebih lanjut tentang mengapa nanti). Karena ini merupakan pengukuran absolut, ini dapat digunakan kapan saja Anda ingin mendefinisikan sesuatu sebagai ukuran tertentu, daripada menjadi proporsional dengan sesuatu yang lain seperti ukuran jendela browser atau ukuran font.

  Seperti semua unit absolut lainnya, unit px tidak menskala menurut lebar jendela browser. Jadi, jika seluruh desain halaman Anda menggunakan unit absolut seperti px daripada % , itu tidak akan beradaptasi dengan lebar browser. Ini secara inheren tidak baik atau buruk, hanya pilihan yang perlu dibuat perancang antara menempel ke ukuran yang tepat dan menjadi tidak fleksibel dibandingkan peregangan tetapi dalam proses tidak mengikuti ukuran yang tepat. Ini akan menjadi khas bagi sebuah situs untuk memiliki campuran objek ukuran tetap dan ukuran fleksibel.

  Elemen ukuran tetap sering perlu dimasukkan ke dalam halaman - seperti spanduk iklan, logo atau ikon. Ini memastikan Anda hampir selalu membutuhkan setidaknya beberapa pengukuran berbasis px dalam desain. Gambar, misalnya, akan (secara default) diskalakan sedemikian rupa sehingga setiap piksel berukuran 1 * px *, jadi jika Anda mendesain gambar, Anda akan memerlukan unit px . Ini juga sangat berguna untuk ukuran font yang tepat, dan untuk lebar perbatasan, di mana karena pembulatan, paling masuk akal untuk menggunakan unit px untuk sebagian besar layar.

  Semua pengukuran absolut saling terkait secara kaku; yaitu, 1in adalah selalu kali 96px , seperti 1in adalah selalu 72pt . (Perhatikan bahwa 1in hampir tidak pernah benar-benar satu inci fisik ketika berbicara tentang media berbasis layar). Semua pengukuran absolut mengasumsikan resolusi layar nominal 96ppi dan jarak pandang nominal monitor desktop, dan pada layar seperti itu satu px akan sama dengan satu piksel fisik pada layar dan satu diakan sama dengan 96 piksel fisik. Pada layar yang berbeda secara signifikan dalam kerapatan piksel atau jarak tampilan, atau jika pengguna telah memperbesar halaman menggunakan fungsi zoom browser, px tidak akan lagi berhubungan dengan piksel fisik.

• em bukan merupakan unit absolut - ini adalah unit yang relatif terhadap ukuran font yang saat ini dipilih. Kecuali jika Anda telah menimpa gaya font dengan mengatur ukuran font Anda dengan unit absolut (seperti px atau pt ), ini akan dipengaruhi oleh pilihan font di browser pengguna atau OS jika mereka telah membuatnya, sehingga tidak masuk akal untuk menggunakan em sebagai satuan umum panjang kecuali di mana Anda secara khusus ingin skala sebagai skala ukuran font.

  Gunakan em ketika Anda secara spesifik menginginkan ukuran sesuatu bergantung pada ukuran font saat ini.

• % juga merupakan unit relatif, dalam hal ini, relatif terhadap tinggi atau lebar elemen induk. Mereka adalah alternatif yang baik untuk unit px untuk hal-hal seperti lebar total desain jika desain Anda tidak bergantung pada ukuran piksel tertentu untuk mengatur ukurannya.

  Menggunakan % unit dalam desain Anda memungkinkan desain Anda untuk beradaptasi dengan lebar layar / perangkat, sedangkan menggunakan unit absolut seperti px tidak.

Saya memiliki laptop kecil dengan resolusi tinggi dan harus menjalankan Firefox dalam 120% pembesaran teks untuk dapat membaca tanpa menyipitkan mata.

Banyak situs memiliki masalah dengan ini. Tata letak menjadi kacau, teks dalam tombol dipotong setengah atau hilang sama sekali. Bahkan stackoverflow.com menderita karenanya:

Perhatikan bagaimana tombol atas dan tab halaman tumpang tindih. Jika mereka akan menggunakan unit em bukan px, tidak akan ada masalah.

Alasan saya mengajukan pertanyaan ini adalah karena saya lupa bagaimana cara menggunakan em karena memang waktu itu saya meretas dengan senang hati di CSS. Orang-orang tidak memperhatikan bahwa saya menyimpan pertanyaan umum karena saya tidak berbicara tentang ukuran font per se. Saya lebih tertarik dengan cara mendefinisikan gaya pada elemen blok yang diberikan pada halaman.

Seperti yang ditunjukkan oleh Henrik Paul dan lainnya, proporsional dengan ukuran font yang digunakan dalam elemen. Ini adalah praktik umum untuk menentukan ukuran pada elemen blok di px, namun, mengukur font di browser biasanya merusak desain ini. Mengubah ukuran font umumnya dilakukan dengan tombol pintas Ctrl+ +atau Ctrl+ -. Jadi praktik yang baik adalah menggunakan mereka sebagai gantinya.

Menggunakan px untuk menentukan lebar

Ini adalah contoh ilustrasi. Katakanlah kita memiliki div-tag yang ingin kita ubah menjadi kotak tanggal bergaya, kita mungkin memiliki kode-HTML yang terlihat seperti ini:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

Implementasi sederhana akan mendefinisikan lebar date-boxkelas dalam px:

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

Masalah

Namun, jika kita ingin memperbesar teks di browser kita, desainnya akan pecah. Teks juga akan berdarah di luar kotak yang hampir sama dengan apa yang terjadi dengan desain SO seperti yang ditunjukkan flodin . Ini karena kotak akan tetap memiliki ukuran lebar yang sama dengan yang dikunci 50px.

Menggunakan mereka sebagai gantinya

Cara yang lebih cerdas adalah mendefinisikan lebar dalam ems sebagai gantinya:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

Dengan cara itu Anda memiliki desain yang cair pada kotak tanggal, yaitu kotak akan berukuran bersama dengan teks sesuai dengan ukuran font yang ditentukan untuk kotak tanggal. Dalam contoh ini, ukuran font didefinisikan *sebagai 10pt dan akan berukuran 2,5 kali lipat dari ukuran font tersebut. Jadi saat Anda mengukur ukuran font di browser, kotak akan memiliki ukuran 2,5 kali dari ukuran font itu.

Jawaban pilihan teratas di sini dari thomasrutter benar dalam tanggapannya tentang em . Tetapi sangat sangat salah tentang ukuran piksel. Jadi meskipun sudah tua, saya tidak bisa membiarkannya tidak berdarah.

Layar komputer biasanya TIDAK 96dpi! (Atau ppi, jika Anda ingin menjadi jagoan.)

Sebuah piksel TIDAK memiliki ukuran fisik tetap.
(Ya, itu diperbaiki dalam satu layar saja, tetapi di layar berikutnya piksel kemungkinan lebih besar, atau lebih kecil, dan tentu saja BUKAN 1/96 inci.)


Bukti
Menggambar garis, panjang 960 piksel. Ukurlah dengan penggaris fisik. Apakah 10 inci? Tidak..?
Hubungkan laptop Anda ke TV Anda. Apakah garis 10 inci sekarang? Masih tidak?
Tampilkan garis di iPhone Anda. Ukurannya masih sama? Kenapa tidak?

Siapa sih yang menciptakan mitos layar komputer 96dpi?
(Beberapa agama beroperasi dengan mitos 72dpi. Tetapi sama-sama salah.)

Ini berguna untuk semua yang memiliki skala sesuai dengan ukuran font.

Ini sangat berguna pada browser yang menerapkan zoom dengan menskalakan ukuran font. Jadi jika Anda mengukur semua elemen Anda menggunakan emskala mereka sesuai.

Karena em ( http://en.wikipedia.org/wiki/Em_(typography) ) berbanding lurus dengan ukuran font yang saat ini digunakan. Jika ukuran font adalah, katakanlah, 16 poin, satu em adalah 16 poin. Jika ukuran font Anda 16 piksel ( perhatikan : tidak sama dengan poin), satu em adalah 16 piksel.

Ini mengarah pada dua hal (terkait):

1. mudah untuk menjaga proporsi, jika Anda memilih untuk mengedit ukuran font Anda di CSS Anda nanti.
2. Banyak browser mendukung ukuran font khusus, menggantikan CSS Anda. Jika Anda mendesain semuanya dalam piksel, tata letak Anda mungkin pecah dalam kasus ini. Tetapi, jika Anda menggunakan ems, penimpaan ini harus mengurangi masalah ini.

contoh:

Kode: tubuh {font-size: 10px;} // tetap di 10 semua ukuran di bawah ini benar, ubah nilai ini dan sisanya ubah menjadi misalnya 1,4 dari nilai ini

1 {font-size: 1.2em;} // 12px

2 {ukuran font: 1.4em;} // 14px

3 {ukuran font: 1.6em;} // 16px

4 {ukuran font: 1.8em;} // 18px

5 {ukuran font: 2em;} // 20px

...

tubuh

1

2

3

4

5

dengan mengubah nilai dalam tubuh, sisanya berubah secara otomatis menjadi semacam kali nilai dasar ...

10 × 2 = 20 10 × 1.6 = 16 dll

Anda bisa memiliki nilai dasar sebagai 8px… jadi 8 × 2 = 16 8 × 1.6 = 12.8 // dapat dibulatkan oleh browser

Alasan yang sangat praktis adalah bahwa IE 6 tidak membiarkan Anda mengubah ukuran font jika itu ditentukan menggunakan px, sedangkan itu tidak jika Anda menggunakan unit relatif seperti em atau persentase. Tidak mengizinkan pengguna untuk mengubah ukuran font sangat buruk untuk aksesibilitas. Meskipun dalam penurunan, masih ada banyak pengguna IE 6 di luar sana.

gunakan px untuk penempatan elemen grafis yang tepat. gunakan em untuk pengukuran yang harus melakukan penentuan posisi dan spasi di sekitar elemen teks seperti ketinggian-garis dll. px adalah piksel yang akurat, mereka dapat berubah secara dinamis dengan font yang digunakan

Alasan utama untuk menggunakan em atau persentase adalah untuk memungkinkan pengguna untuk mengubah ukuran teks tanpa merusak desain. Jika Anda mendesain dengan font yang ditentukan dalam px, mereka tidak mengubah ukuran (di IE 6 dan lainnya) jika pengguna memilih ukuran teks - lebih besar . Ini sangat buruk bagi pengguna dengan cacat visual.

Untuk beberapa contoh dan artikel tentang desain seperti ini (ada banyak sekali untuk dipilih), lihat edisi terbaru A List Apart: Fluid Grids , artikel yang lebih lawas Bagaimana Menentukan Ukuran Teks dalam CSS atau Desain Web Antipeluru Dan Cederholm .

Gambar Anda masih harus ditampilkan dengan ukuran px, tetapi, secara umum, itu tidak dianggap sebagai bentuk yang baik untuk ukuran teks Anda dengan px.

Sama seperti saya secara pribadi membenci IE6, saat ini satu - satunya browser yang disetujui untuk sebagian besar pengguna di perusahaan Fortune 200 kami.

Ada solusi sederhana jika Anda ingin menggunakan px untuk menentukan ukuran font, tetapi tetap menginginkan kegunaan yang disediakan oleh mereka dengan menempatkan ini di file CSS Anda:

body {
  font-size: 62.5%;
}

Sekarang tentukan ptag Anda (dan lainnya) seperti ini:

p {
  font-size: 0.8em; /* This is equal to 8px */
  font-size: 1.0em; /* This is equal to 10px */
  font-size: 1.2em; /* This is equal to 12px */
  font-size: 2.0em; /* This is equal to 20px */
}

Dan seterusnya.

Anda mungkin ingin menggunakan em untuk ukuran font sampai IE6 hilang (dari situs Anda). Px akan baik-baik saja ketika pembesaran halaman (tidak seperti pembesaran teks) menjadi perilaku standar.

Traingamer sudah menyediakan tautan yang diperlukan .

Pixel adalah unit absolut sedangkan rem / em adalah unit relatif. Untuk lebih lanjut: https://drafts.csswg.org/css-values-3/

Anda harus menggunakan unit relatif ketika Anda ingin ukuran font menjadi adaptif sesuai dengan ukuran font sistem karena sistem memberikan nilai ukuran font ke elemen root yang merupakan elemen HTML.

Dalam hal ini, di mana halaman web terbuka di google chrome, ukuran font untuk elemen HTML diatur oleh chrome, coba ubah untuk melihat efek pada halaman web dengan font unit rem / em.

Jika Anda menggunakan pxsebagai unit untuk font, font tidak akan mengubah ukuran sedangkan font dengan rem/em unit akan mengubah ukuran ketika Anda mengubah ukuran font sistem.

Jadi gunakan pxketika Anda ingin ukuran untuk diperbaiki dan gunakan rem/ emketika Anda ingin ukuran menjadi adaptif / dinamis dengan ukuran sistem.

Konsensus umum adalah menggunakan persentase untuk ukuran font, karena lebih konsisten di seluruh browser / platform.

Ini lucu, saya selalu menggunakan pt untuk ukuran font dan saya berasumsi semua situs menggunakannya. Anda biasanya tidak menggunakan ukuran px di aplikasi lain (mis. Word). Saya kira itu karena mereka untuk dicetak - tetapi ukurannya sama di browser web seperti di Word ...

Hindari penggunaan em atau px karena itu lebih mudah untuk menemukan nilai yang dihitung. Tetapi antara em dan px, px lebih baik karena em sulit untuk debug.