Pemahaman saya dari membaca utas seperti ini adalah bahwa titik ems adalah untuk menentukan semua pengukuran di halaman web Anda, berdasarkan ukuran font dasar , yang dapat diatur oleh browser Anda.
Misalnya, di Chrome Anda dapat melakukan ini dengan membuka settings -> show advanced settings -> web content -> font size: very large
. Saya mungkin melakukan ini jika saya menggunakan monitor resolusi tinggi yang besar, itu jauh.
Saya membuat plunker yang menunjukkan perbedaan antara ems dan px dalam ukuran.
#div1 {
width: 320px
}
#div2 {
width: 20em;
}
Jika di browser saya mengatur ukuran font menjadi sedang, div ini akan memiliki ukuran yang sama, ukuran font dasar menjadi 16px, jadi 20em = 320px.
Namun, ketika saya mengubah ukuran font browser saya menjadi sangat besar, kita dapat melihat bahwa div yang diukur dalam ems telah meningkatkan ukurannya.
Namun, efek ini akan dinegasikan jika saya menentukan ukuran font di tag tubuh misalnya.
body {
font-size: 16px;
}
Karena sekarang css saya menimpa ukuran font yang ditetapkan oleh browser.
Saya mendapatkan bahwa ems akan menjadi penting di hari-hari browser yang lebih tua, di mana zoom pada halaman hanya akan meningkatkan font. Namun dewasa ini browser modern meningkatkan piksel dan font, menjadikan perihal masalah perbesaran.
Melihat-lihat web - banyak situs web yang mengatur ukuran font di tag tubuh mereka.
Stack Overflow misalnya, mengatur ukuran font menjadi 13px pada tag body. Pengaturan ukuran font di browser saya tidak mempengaruhi tata letak Stack Overflow sedikit pun.
Hasil pencarian Google tidak melakukan ini.
(kedua tangkapan layar ini diambil dengan ukuran font chrome yang diatur pada sangat besar, dan 100% zoom).
Jadi mungkin Anda bisa berargumen bahwa pengaturan ukuran font di tag tubuh, adalah ide yang buruk karena mencegah pengaturan aksesibilitas pengguna sendiri. Tetapi mengingat bahwa pengguna dapat memperbesar untuk meningkatkan ukuran (yang secara proporsional akan meningkatkan semua piksel juga) - ini sepertinya bukan masalah nyata.
body { font-size: XYZ; }
penggunaan lembar gaya pengguna denganbody { font-size: ZYX !important; }