Gli em sono ancora rilevanti?

Question

Gli em sono ancora rilevanti?

#1 da (25 voti)
#2 da (13 voti)

16

La mia comprensione dal leggere thread come questo è che il punto di ems è per definire tutte le misure nella tua pagina web, tramite la dimensione del carattere di base , che può essere impostata dal tuo browser.

Ad esempio, in Chrome puoi farlo andando a settings -> show advanced settings -> web content -> font size: very large . Potrei farlo se usassi un monitor grande e ad alta risoluzione, che era molto lontano.

Ho creato un plunker che dimostra la differenza tra ems e px nel ridimensionamento.

#div1 {
  width: 320px
}

#div2 {

  width: 20em;
}

Se nel mio browser ho impostato la dimensione del carattere su media, queste div saranno della stessa dimensione, la dimensione del font di base è 16px, quindi 20em = 320px.

Tuttavia,quandocambioladimensionedelcaratteredelmiobrowserfinoamoltogrande,possiamovederecheildivmisuratoinemshaaumentatoledimensioni.

Tuttavia,questoeffettoverràannullatoseadesempiodefiniscoladimensionedelcarattereneltagbody.

body{font-size:16px;}

Perchéorailmiocssstascavalcandoladimensionedelcarattereimpostatadalbrowser.

Hocapitochegliemsarebberostatiimportantiaitempideibrowserpiùvecchi,incuilozoomsullapaginaridimensionavasoloicaratteri.Maalgiornod'oggiibrowsermoderniaumentanosiapixelchefont,rendendoilproblemadellozoomproblematico.

SeguardiintornoalWeb,moltisitifannoimpostanoladimensionedelcaratterenellorotagbody.

Overflowdellostack,adesempio,impostaladimensionedelfontsu13pxneltagbody.L'impostazionedelladimensionedelcaratterenelmiobrowsernoninfluisceminimamentesullayoutdiOverflowdellostack.

IrisultatidiricercadiGooglenonlofanno.

(entrambi questi screenshot sono stati ripresi con le dimensioni dei caratteri di Chrome impostate su un valore molto grande e con uno zoom del 100%).

Quindi forse potresti obiettare che l'impostazione della dimensione del carattere nel tag del corpo è una cattiva idea perché impedisce le impostazioni di accessibilità di un utente. Ma dato che l'utente può ingrandire per aumentare le dimensioni (che aumenteranno proporzionalmente anche tutti i pixel) - questo non sembra un vero problema.

css

posta dwjohnston 05.10.2016 - 00:42

fonte

2 risposte

13

the point of ems is to define all measurements in your webpage, by the base font size

Questo potrebbe essere un fraintendimento dei termini da parte mia, ma per chiarire: em è relativo alla dimensione del carattere "dell'elemento corrente". rem è relativo alla dimensione del carattere di root.

I get that ems would have been important in the days of older browsers, where zooming on the page would only scale up fonts.

Questo non è il motivo per cui utilizzo em . In effetti, la tua esperienza di zoom è l'ultima cosa che mi viene in mente quando uso le unità di misura relative. La mia preoccupazione è duplice.

In primo luogo, di solito sono interessato a definire semplicemente i miei layout in termini relativi. La mia preoccupazione è che i miei contenitori abbiano un bell'aspetto l'uno rispetto all'altro e il testo al loro interno. E quando cambio il font o ritocco le cose nella catena, non voglio ricalcolare e aggiornare tutto a mano per mantenere le proporzioni per le quali sto girando. Lascia che sia il browser a fare i conti ...

In secondo luogo, voglio solo esprimere le dimensioni dei caratteri in termini semplici che posso capire. Se esprimo i miei caratteri di base in pt e tutto il resto in rem o em , è più facile per me. Non devo conoscere la risoluzione del tuo dispositivo e non devi zoomare. Il tuo browser sa quanti pixel usare; nessuno di noi dovrebbe pensarci.

risposta data 05.10.2016 - 03:40

fonte

Leggi altre domande sui tag css

In che modo un'istruzione switch è migliore di una serie di istruzioni if? [duplicare] Vantaggi del modello di strategia

score 25 · Accepted Answer

However, this effect will be negated if I define the font size in the body tag for example.
body {
  font-size: 16px;
}
Because now my css is overriding the font size set by the browser.

Stai dimenticando accessibility .

Vedi C14: utilizzo delle unità em per le dimensioni dei caratteri da Linee guida per l'accessibilità del contenuto Web (WCAG 2.0).

Imposta l'opzione relativa alle dimensioni del carattere del tuo browser su Molto grande . Ora vai su un sito web come W3C . Com'è il testo?

Questo è ciò di cui tratta questa opzione. Gli sviluppatori di StackExchange e molti altri siti Web hanno deciso che le loro scelte sono più importanti delle scelte degli utenti che possono essere ipovedenti. Se questa scelta sia giusta o sbagliata è al di fuori dello scopo di questa domanda, e la risposta non è necessaria direttamente.

Tuttavia, l'utente potrebbe essere obbligato (anche per legge per alcuni siti Web) a prendere decisioni diverse e consentire agli utenti di selezionare la dimensione del carattere. Da lì, hai una scelta: o si specifica la dimensione delle immagini e le diverse zone della pagina in pixel, nel qual caso l'opzione dimensione carattere del browser avrà effetti divertenti sul layout, oppure si usa em per anche questi elementi.

Nota inoltre che se non specifica la dimensione del carattere in pixel a livello di corpo, quindi rimani con em almeno per la dimensione del carattere ovunque. Ad esempio, Google ha specificato la dimensione del carattere in modo incoerente e la loro pagina di ricerca appare strana, specialmente se i titoli appaiono più piccoli del testo normale. Wikipedia, d'altra parte, ha fatto un ottimo lavoro usando em ogni volta che è stata specificata la dimensione del carattere. Di seguito sono riportati gli screenshot di entrambi i siti resi da Chromium con l'opzione di dimensione del carattere impostata su Molto grande :

Soperhapsyoucouldarguethatsettingfontsizeinthebodytag,isabadideabecauseitpreventsauser'sownaccessibilitysettings.Butgiventhattheusercanzoomtoincreasethesizes(whichwillproportionallyincreaseallthepixelstoo)-thisdoesn'tseemlikearealproblem.

Questoèunproblemarealeperdueragioni.

Innanzitutto,lamaggiorpartedeibrowsermemorizzailfattoredizoomsitopersito.Sehaiproblemiallavista,saraicostrettoafarezoom,ancoraeancora,suognisitochevisiti.Questofaschifo.Datal'attualeindifferenzadeiwebdesigneredeglisviluppatoriversol'accessibilità,lepersoneipovedentidevonofarlocomunque,maquestononsignificachedovrebberimanerecosì.

Insecondoluogo,troppisitiWebnonsicomportanobenevisivamenteancheconlozoom.Isitiwebreattivifunzionanobene,maquellinonreattivimostrerannounoscorrimentoorizzontaleounasortadi"il tuo schermo è troppo piccolo".

C'è anche una differenza fondamentale tra lo zoom e la scala del testo per uno sviluppatore. Mentre em significa "aggiustalo alle preferenze della dimensione del testo dell'utente", lo zoom riguarda il ridimensionamento dell'intera pagina, non solo del testo.

Fai un esempio del menu del sito (nella parte superiore della pagina, con i collegamenti posizionati in una linea). Con lo zoom, sai che l'altezza del menu cambierà proporzionalmente agli altri elementi. Con l'opzione di dimensione del testo, spetta a te determinare il comportamento. Puoi presumere che una persona con disabilità visive possa vedere il tuo menu di 50px in ogni caso: a nessuno mancherà un menu nero su sfondo bianco. Oppure puoi decidere che la sua altezza debba rimanere proporzionale al testo, ad esempio 1.5em .