Menggunakan Ems untuk menukar saiz fon
Apabila anda membina laman web, kebanyakan profesional mengesyorkan bahawa anda saiz fon (dan sebenarnya, semuanya) dengan ukuran relatif seperti ems, exs, percentages, atau pixels. Ini kerana anda benar-benar tidak tahu semua cara yang berbeza seseorang mungkin melihat kandungan anda. Dan jika anda menggunakan ukuran mutlak (inci, sentimeter, milimeter, mata, atau picas), ia mungkin menjejaskan paparan atau pembacaan halaman dalam peranti yang berbeza.
Dan W3C mengesyorkan bahawa anda menggunakan em untuk saiz.
Tetapi Bagaimana Big adalah Em?
Menurut W3C em:
"adalah sama dengan nilai yang dikira dari 'saiz saiz fon' bagi elemen yang digunakan. Pengecualian adalah apabila 'em' berlaku dalam nilai 'saiz fon' harta itu sendiri, di mana ia merujuk kepada saiz fon elemen ibu bapa. "
Dengan kata lain, em tidak mempunyai saiz mutlak. Mereka mengambil nilai saiz mereka berdasarkan di mana mereka berada. Bagi kebanyakan pereka Web , ini bermakna bahawa mereka berada dalam pelayar web, jadi fon yang tinggi adalah ukuran yang sama dengan saiz fon lalai untuk penyemak imbas itu.
Tetapi berapa tinggi saiz lalai? Tidak ada cara untuk menjadi 100% pasti, kerana pelanggan boleh menukar saiz fon lalai mereka dalam pelayar mereka, tetapi kerana kebanyakan orang tidak anda boleh menganggap bahawa kebanyakan pelayar mempunyai saiz fon lalai dari 16px. Jadi kebanyakan masa 1em = 16px .
Pikirkan Piksel, Gunakan Ems untuk Ukur
Sebaik sahaja anda tahu bahawa saiz fon lalai adalah 16px, anda boleh menggunakan em untuk membolehkan pelanggan anda mengubah saiz halaman dengan mudah tetapi berfikir dalam piksel untuk saiz fon anda.
Katakan anda mempunyai struktur ukuran seperti ini:
- Tajuk 1 - 20px
- Tajuk 2 - 18px
- Tajuk 3 - 16px
- Teks utama - 14px
- Sub teks - 12px
- Nota kaki - 10px
Anda boleh menentukan cara itu menggunakan piksel untuk pengukuran, tetapi sesiapa yang menggunakan IE 6 dan 7 tidak akan dapat mengubah saiz halaman anda dengan baik. Jadi, anda perlu menukar saiz kepada em dan ini hanya soal matematik:
- Tajuk 1 - 1.25em (16 x 1.25 = 20)
- Headline 2 - 1.125em (16 × 1.125 = 18)
- Tajuk 3 - 1em (1em = 16px)
- Teks utama - 0.875em (16 x 0.875 = 14)
- Sub teks - 0.75em (16 x 0.75 = 12)
- Nota kaki - 0.625em (16 x 0.625 = 10)
Jangan Lupakan Pusaka!
Tetapi itu tidak semua ada kepada ems. Perkara lain yang perlu anda ingat adalah bahawa mereka mengambil saiz ibu bapa. Jadi jika anda mempunyai elemen bersarang dengan saiz fon yang berbeza, anda boleh berakhir dengan font yang lebih kecil atau lebih besar daripada yang anda harapkan.
Sebagai contoh, anda mungkin mempunyai helaian gaya seperti ini:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
Ini akan menghasilkan font yang 14px dan 10px untuk teks utama dan catatan kaki masing-masing. Tetapi jika anda meletakkan nota kaki di dalam perenggan, anda boleh berakhir dengan teks iaitu 8.75px dan bukannya 10px. Cobalah sendiri, letakkan CSS di atas dan HTML berikut di dalam dokumen:
Fon ini adalah 14px atau 0.875 em pada ketinggian.
Perenggan ini mempunyai catatan kaki di dalamnya.
Walaupun ini hanya perenggan nota kaki.
Teks nota kaki sukar dibaca pada 10px, ia hampir tidak boleh dibaca pada 8.75px.
Oleh itu, apabila anda menggunakan em, anda perlu menyedari saiz objek ibu bapa, atau anda akan mempunyai beberapa elemen bersaiz ganjil pada halaman anda.