2010-03-05 26 views
32

Qual è la differenza tra px, em e ex? E quando definisci la dimensione del carattere in CSS, usi px, pt o em?Qual è la differenza tra px, em ed ex?

+3

Duplicati correlati e possibili: http://stackoverflow.com/questions/1932773/should-i-use-em-or-px, http://stackoverflow.com/questions/348978/are-there-any- pratico-motivi-per-utilizzare-em-invece-di-pt-font-size-units, http://stackoverflow.com/questions/132685/font-size-in-css-or-em, http: // stackoverflow.com/questions/609517/why-em-instead-of-px. –

+0

em, px, pt, percentuale. Qual è la differenza ? Alcune informazioni qui: http://markupjavascript.blogspot.in/2013/10/em-px-pt-percent-what-is-difference.html –

+0

Penso che questa sia una domanda duplicata, puoi trovare la stessa qui http://stackoverflow.com/questions/3333076/difference-between-px-and-em/25540376 – Phuc

risposta

18
  1. Pixel (px) dipendono dal browser. È la dimensione assoluta che vedresti sul tuo schermo.
  2. Em sono una sorta di percentuali simili. Em si riferisce alle dimensioni del testo di base. Il valore di 1 em indica la stessa cosa del valore di 100 percent. Ma puoi anche dirlo in modo opposto: un valore percentuale è solo un em moltiplicato per 100.
  3. I punti (pt) sono quelli che vorresti usare nei supporti di stampa.
+2

Non vuoi dire che i pixel sono * schermo * -dipendenti? Hanno lo stesso aspetto su qualsiasi browser che si utilizza, ma cambiano in base * esclusivamente * alle impostazioni dello schermo/schermo. –

+3

il parallelo alle percentuali è molto fuorviante, perché la percentuale non è collegata in modo inerente alla dimensione del font –

+0

@ JanusTroelsen - Quando si tratta di dimensioni dei caratteri lo è. – Quentin

11

qual è la differenza px, em ed ex?

http://www.w3.org/TR/CSS21/syndata.html#length-units descrive questi e le altre unità di lunghezza disponibile in CSS

Amd quando si definisce font-size in css, posso usare px, pt o em?

Come regola generale, utilizzare le percentuali sullo schermo e pt per la stampa.

+1

Direi che l'utilizzo di em o ex è migliore delle percentuali per l'allineamento che è fortemente dipendente dal testo, poiché tali valori corrispondono alle dimensioni dei caratteri. – dbmikus

+0

@dbmikus - 'ex' è un po 'strano, la maggior parte delle persone non vuole esprimere le dimensioni dei caratteri in questi termini. '1em' è esattamente' 100% 'quindi la correlazione è esattamente la stessa. Alcuni browser più vecchi (e si noti quando la risposta è stata scritta) erano buggy quando si trattava di dimensioni dei caratteri in unità em, quindi le percentuali erano misurabilmente superiori. In questi giorni non importa tanto. – Quentin

25

em: la font-size del carattere rilevante
ex: la x-height del carattere rilevante
px: pixel, rispetto al dispositivo di visualizzazione

8

Unità CSS Lunghezza:

  • assoluti: pollici (in), centimetro (cm), milimeter (mm), punti (PT), pica (pc)

I punti sono misurazioni tipografiche standard che sono state utilizzate da stampanti e tipografi per decenni e da programmi di elaborazione di testi per molti anni. Tradizionalmente, ci sono 72 punti per un pollice (i punti sono stati definiti prima dell'uso diffuso del sistema metrico). Pertanto, le lettere maiuscole del testo impostato su 12 punti devono essere alte un sesto di pollice. Ad esempio, p {font-size: 18pt;} è equivalente a p {font-size: 0.25in;}.

Picas sono un altro termine tipografico. Una pica equivale a 12 punti, il che significa che ci sono 6 picas per un pollice. Come appena mostrato, le lettere maiuscole del testo impostate su 1 pica dovrebbero essere alte un sesto di pollice. Ad esempio, p {font-size: 1.5pc;} imposta il testo alla stessa dimensione delle dichiarazioni di esempio trovate nella definizione di punti.

Queste unità sono davvero utili solo se il browser conosce tutti i dettagli del monitor su cui viene visualizzata la pagina, la stampante che si sta utilizzando o qualsiasi altro agente utente potrebbe applicare. Su un browser web, il display è influenzato dalle dimensioni del monitor e dalla risoluzione a cui è impostato il monitor e non c'è molto che tu, come l'autore, possa fare su questi fattori. Le unità assolute sono molto più utili nella definizione dei fogli di stile per i documenti stampati, dove la misurazione delle cose in termini di pollici, punti e picas è comune. Come hai visto, il tentativo di utilizzare misure assolute nel web design è pericoloso al massimo.

  • relativa: em (em-altezza), ex (e-altezza), px. I primi due stanno per e "x-height", che sono misure tipografiche comuni; tuttavia, nei CSS, hanno dei significati che non ci si potrebbe aspettare se si ha familiarità con la tipografia.

em: una "em" è definito come il valore di font-size per un dato font. Se la dimensione del font di un elemento è 14 pixel, per quell'elemento 1em è uguale a 14 pixel.

ex: si riferisce all'altezza di una minuscola x del font utilizzato. Pertanto, se si dispone di due paragrafi in cui il testo è di 24 punti, ma ogni paragrafo utilizza un carattere diverso, il valore di ex potrebbe essere diverso per ogni paragrafo. Questo perché i diversi tipi di carattere hanno altezze diverse per x

px: piccole caselle di colore in un monitor sono pixel. In generale, se si dichiara qualcosa come dimensione carattere: 18px, un browser Web quasi sicuramente utilizzerà i pixel effettivi sul monitor dopo tutto, sono già lì ma con altri dispositivi di visualizzazione, come le stampanti, l'agente utente avrà a ridimensiona le lunghezze dei pixel a qualcosa di più sensato. In altre parole, il codice di stampa deve calcolare quanti punti ci sono in un pixel e, per farlo, può usare il pixel di riferimento 96ppi.

conclution

causa di questo potenziale per riscalare, pixel sono definiti come unità di misura relativa, anche se, nel web design, si comportano molto simile unità assolute.

Rrefrence: css the definite guid by eric meyer

0

em: Il em è un'unità scalabile che viene utilizzato nei mezzi documento web. Un em è uguale alla dimensione del carattere corrente, ad esempio se la dimensione del font del documento è 12pt, 1em equivale a 12pt.

px: I pixel sono unità di dimensioni fisse utilizzate nei media dello schermo (ovvero da leggere sullo schermo del computer). Un pixel è uguale a un punto sullo schermo del computer (la divisione più piccola della risoluzione dello schermo).

pt: I punti sono tradizionalmente utilizzati nei supporti di stampa (qualsiasi cosa che deve essere stampata su carta, ecc.). Un punto è uguale a 1/72 di pollice. I punti sono molto simili ai pixel, in quanto sono unità a dimensione fissa e non possono ridimensionarsi.

+0

Per favore cita le tue fonti. – BoltClock

Problemi correlati