Apakah mereka masih relevan?

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.

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.

Anda lupa tentang aksesibilitas .

Lihat C14: Menggunakan unit em untuk ukuran font dari Pedoman Aksesibilitas Konten Web (WCAG 2.0).

Atur opsi ukuran font browser Anda menjadi Sangat besar . Sekarang, masuklah ke situs web seperti W3C . Seperti apa bentuk teksnya?

Ini adalah tentang opsi ini. Pengembang StackExchange dan banyak situs web lain memutuskan bahwa pilihan mereka lebih penting daripada pilihan pengguna yang mungkin mengalami gangguan visual. Apakah pilihan ini benar atau salah ada di luar ruang lingkup pertanyaan ini, dan jawabannya tidak perlu lurus.

Namun, Anda mungkin dipaksa (termasuk oleh hukum untuk beberapa situs web) untuk membuat keputusan yang berbeda, dan untuk membiarkan pengguna memilih ukuran font mereka. Dari sana, Anda memiliki pilihan: Anda menentukan ukuran gambar dan zona halaman yang berbeda dalam piksel, dalam hal ini opsi ukuran font peramban akan memiliki efek menyenangkan pada tata letak, atau Anda menggunakan emelemen-elemen tersebut sebagai baik.

Perhatikan juga bahwa jika Anda tidak menentukan ukuran font dalam piksel pada level tubuh, maka pertahankan emsetidaknya untuk ukuran font di mana saja. Misalnya, Google menentukan ukuran font tidak konsisten, dan halaman pencarian mereka terlihat aneh, terutama dengan judul yang muncul lebih kecil dari teks biasa. Wikipedia, di sisi lain, melakukan pekerjaan yang sangat baik dengan menggunakan emsetiap kali ukuran font ditentukan. Di bawah ini adalah tangkapan layar dari kedua situs yang dibuat oleh Chromium dengan opsi ukuran font diatur ke Sangat besar :

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.

Ini adalah masalah nyata karena dua alasan.

Pertama, sebagian besar browser menyimpan situs faktor zoom menurut situs. Jika Anda memiliki gangguan penglihatan, Anda akan dipaksa untuk memperbesar, lagi dan lagi, di setiap situs yang Anda kunjungi. Itu menyebalkan. Mengingat ketidakpedulian desainer dan pengembang web terhadap aksesibilitas saat ini, orang yang tunanetra harus tetap melakukannya, tetapi ini tidak berarti harus tetap seperti ini.

Kedua, terlalu banyak situs web yang tidak akan berperilaku baik secara visual saat diperbesar. Situs web responsif bekerja dengan baik, tetapi situs yang tidak responsif akan menunjukkan perilaku gulir horizontal atau semacam "layar Anda terlalu kecil".

Ada juga perbedaan mendasar antara pembesaran dan skala teks untuk pengembang. Sementara itu emberarti "sesuaikan itu dengan preferensi ukuran teks pengguna", zoom adalah tentang penskalaan seluruh halaman ke atas atau ke bawah, bukan hanya teks.

Ambil contoh menu situs (di bagian atas halaman, dengan tautan yang diposisikan dalam satu baris). Dengan zooming, Anda tahu bahwa ketinggian menu akan berubah secara proporsional ke elemen lainnya. Dengan opsi ukuran teks, terserah Anda untuk menentukan perilaku. Anda mungkin berasumsi bahwa orang yang tunanetra akan dapat melihat 50pxmenu -tinggi Anda dalam semua kasus: tidak ada yang akan melewatkan menu hitam di latar belakang putih. Atau Anda dapat memutuskan bahwa tingginya harus tetap proporsional dengan teks, misalnya 1.5em.

titik ems adalah untuk menentukan semua pengukuran di halaman web Anda, berdasarkan ukuran font dasar

Ini mungkin kesalahpahaman istilah di pihak saya, tetapi untuk memperjelas: emadalah relatif terhadap ukuran font "elemen saat ini". remrelatif terhadap ukuran font root.

Saya mendapatkan bahwa ems akan menjadi penting di hari-hari browser yang lebih tua, di mana zoom pada halaman hanya akan meningkatkan font.

Itu bukan alasan saya menggunakan em. Faktanya, pengalaman zoom Anda adalah hal terakhir dalam pikiran saya ketika saya menggunakan satuan ukuran relatif. Kekhawatiran saya ada dua kali lipat.

Pertama, saya biasanya tertarik hanya mendefinisikan tata letak saya dalam istilah relatif. Kekhawatiran saya adalah bahwa wadah saya terlihat baik dalam kaitannya dengan satu sama lain dan teks di dalamnya. Dan ketika saya mengubah font atau mengubah hal-hal di rantai, saya tidak ingin menghitung ulang dan memperbarui semuanya dengan tangan untuk mempertahankan proporsi yang saya inginkan. Biarkan peramban melakukan perhitungan ...

Kedua, saya hanya ingin mengekspresikan ukuran font secara sederhana yang dapat saya mengerti. Jika saya mengekspresikan font dasar saya ptdi dan semua yang lain di rematau emdi, itu lebih mudah bagi saya. Saya tidak perlu tahu resolusi perangkat Anda, dan Anda tidak perlu memperbesar. Browser Anda tahu berapa banyak piksel yang digunakan; kita berdua tidak harus memikirkannya.