Uzante Ems por ŝanĝi tipajn grandecojn
Kiam vi konstruas retpaĝon, plej multaj profesiaj rekomendas al vi grandajn tiparojn (kaj fakte, ĉion) kun relativa mezuro kiel ems, ekzs, procentoj aŭ pikseloj. Ĉi tio estas ĉar vi vere ne scias ĉiujn malsamajn manierojn, kiujn iu povus vidi vian enhavon. Kaj se vi uzas absolutan mezuron (centimetroj, milimetroj, punktoj aŭ picas), ĝi povus influi la ekranon aŭ legibilidad de la paĝo en malsamaj aparatoj.
Kaj la W3C rekomendas, ke vi uzas ems por grandecoj.
Sed Kiel Granda estas Em?
Laŭ la W3C-a:
"estas egala al la komputita valoro de la" font-grandeco "propraĵo de la elemento sur kiu ĝi estas uzata. La escepto estas kiam 'em' okazas en la valoro de la 'font-grandeco' propraĵo mem, en kies kazo ĝi raportas al la tiparo de la gepatra elemento. "
Alivorte, ems ne havas absolutan grandecon. Ili prenas siajn grandvalorajn valorojn bazitajn sur kie ili estas. Por la plimulto de la diseñadores retejo , tio signifas, ke ili estas en retumilo, do tiparo, kiu estas 1em alta, estas ĝuste la sama grandeco kiel la defaŭlta tipara grandeco por tiu retumilo.
Sed kiom alta estas la defaŭlta grandeco? Ne estas maniero esti 100% certa, ĉar klientoj povas ŝanĝi sian defaŭltan tiparon en siaj retumiloj, sed ĉar la plej multaj homoj ne povas supozi, ke multaj foliumiloj havas defaŭlta tipara grandeco de 16px. Do plejparto de la tempo 1em = 16px .
Pensu en Pikseloj, Uzu Ems por la Mezuro
Fojo vi scias, ke la defaŭlta tipara grandeco estas 16px, vi povas uzi ems por permesi al viaj klientoj regrandigi la paĝon facile sed pensi en pikseloj por via tipara grandecoj.
Diru, ke vi havas sizing strukturon ion simila al ĉi tio:
- Titolo 1 - 20px
- Titolo 2 - 18px
- Titolo 3 - 16px
- Ĉefa teksto - 14px
- Sub teksto - 12px
- Footnotes - 10px
Vi povus difini ilin tiel uzante pikselojn por la mezuro, sed tiam iu ajn uzanta IE 6 kaj 7 ne povus regrandigi vian paĝon bone. Do vi konvertu la grandecojn al ems kaj ĉi tio estas nur afero pri iuj matematikoj:
- Titolo 1 - 1.25em (16 x 1.25 = 20)
- Titolo 2 - 1.125em (16 × 1.125 = 18)
- Titolo 3 - 1em (1em = 16px)
- Ĉefa teksto - 0.875em (16 x 0.875 = 14)
- Sub teksto - 0.75em (16 x 0.75 = 12)
- Footnotes - 0.625em (16 x 0.625 = 10)
Ne forgesu heredecon!
Sed tio ne ĉiuj estas por ems. La alia afero, kiun vi devas memori, estas, ke ili prenas la grandecon de la gepatro. Do se vi havas anidajn elementojn kun malsamaj tipaj grandecoj, vi povus fini kun tiparo multe pli malgranda aŭ pli granda ol vi atendas.
Ekzemple, vi eble havas stilon kiel ĉi tiu stilo:
p {font-grandeco: 0.875em; }
.footnote {font-grandeco: 0.625em; }
Ĉi tio rezultus en tiparoj kiuj estas 14px kaj 10px por la ĉefa teksto kaj la piednotoj respektive. Sed se vi metas piednoton ene de alineo, vi povus fini per teksto, kiu estas 8.75px anstataŭ 10px. Provu ĝin mem, metu ĉi tion la supre CSS kaj la jenan HTML en dokumenton:
Ĉi tiu tiparo estas 14px aŭ 0.875 ems alte.
Ĉi tiu alineo havas piednoton en ĝi.
Dum ĉi tio estas nur piednoto alineo.
La piednoto teksto malfacilas legi ĉe 10px, ĝi estas preskaŭ nelegebla ĉe 8.75px.
Do, kiam vi uzas ems, vi devas esti tre konscia pri la grandecoj de la gepatraj objektoj, aŭ vi finos kun kelkaj vere neformaj elementoj en via paĝo.