Sviluppo HTML
  1. Sviluppo HTML
  3. Devo impostare la dimensione del carattere di default sul corpo o sull’elemento html?
Intereting Posts
Come caricare un’immagine usando ajax e visualizzarla in anteprima Impostazione di un userAgent personalizzato in HTML o JavaScript CSS: visualizzazione corrotta per gli elementi inferiori dopo la visualizzazione degli elementi superiori Codifico la e commerciale in ? Imposta un’interruzione di riga in testo giustificato e continua a giustificarla Sezioni a forma di V di pagina con lo sfondo dell’immagine Come far apparire la casella di testo quando si passa con il mouse sulla mappa immagine? Forza per riempire tutto lo spazio verticale disponibile Mostra contenuti al passaggio del mouse HTML Decode e codifica Transizione parallasse con rimbalzo sottile tra due ancore / div Calcolo automatico dell’altezza del div jQuery ottiene il contenuto tra tag Alternanza del colore della riga della tabella con la prima riga di un colore diverso HTML / JavaScript: come interrompere il carico su marquee e iniziare con il mouseover?

Devo impostare la dimensione del carattere di default sul corpo o sull’elemento html?

Mi piace lavorare in em quando creo siti web. Pertanto ho impostato una font-size del font-size predefinita del 100.01% sull’elemento body .

La mia domanda è: devo impostare la font-size predefinita sul body o sull’elemento html ? Quali sono i pro ei contro (se ce ne sono) di entrambi?

Ora che l’unità rem sta diventando popolare, si consiglia di impostare la dimensione del font di base sull’elemento root (tag html) (rem sta per em em).

Non credo ci sia alcun vantaggio o svantaggio nell’impostare la font-size base su html o body per consentire il dimensionamento con ems; entrambi avranno lo stesso effetto.

Non correlato alla domanda:

Ti suggerirei comunque di utilizzare una diversa font-size predefinita. Lo impostare come: 

 body { font-size: 62.5%; }

In questo modo si riduce la font-size predefinita da 16px a 10px . Questo rende quindi la scelta font-size molto più semplice in quanto non è necessario eseguire calcoli complessi. Significa che 1em è uguale a 10px e quindi calcolare la dimensione px è una questione di moltiplicare per 10:

  • 1.0em = 10px
  • 1.4em = 14px
  • 1.8em = 1.8em
  • 2.2em = 22px

Se vuoi davvero seguire le regole e mantenere la flessibilità, dovresti considerare questo:

  • La dimensione del font di html è la dimensione del carattere di root , il che significa che sarà usato come base per il calcolo rem, ma questo è tutto, nient’altro. Non dovrebbe essere usato per il calcolo della dimensione del testo reale: è solo una sorta di trucco per alcuni browser.
  • body del carattere del body è la dimensione del carattere predefinita del testo: tutto il testo dovrebbe avere questa dimensione, a meno che non si verifichi una definizione prevalente
  • gli elementi speciali dovrebbero avere dimensioni in rem, con un fallback in pixel

Ecco come appare in CSS: 

 html { font-size: 100% /* or 62.5% or whatever you like, it doesn't matter, it's just a browser fix, however "rem" units will be based on that value, so make it confortable for calculations */ } body { font-size: 0.75em; /* That is your text's default font size. Here i chose 12px */ } h1 { /* or whatever element you want to change the font size of */ font-size: 20px; /* for browsers that don't understand the "rem" unit */ font-size: 1.25rem; /* which equals to 20px if html's font-size was set to 100% */ }

Nota che, mentre tutti gli elementi della pagina dovrebbero ereditare dalla definizione del body , potresti invece utilizzare una definizione all-tag-inclusive, come spesso visto nei resettaggi HTML: 

 a, html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { font-size: 0.75rem; }

Non consiglio comunque questo reset. Gli standard sono fatti per aiutarti a evitare questo tipo di trucchi.