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?
risposta
- Pixel (
px
) dipendono dal browser. È la dimensione assoluta che vedresti sul tuo schermo. Em
sono una sorta di percentuali simili.Em
si riferisce alle dimensioni del testo di base. Il valore di1 em
indica la stessa cosa del valore di100 percent
. Ma puoi anche dirlo in modo opposto: un valore percentuale è solo unem
moltiplicato per 100.- I punti (
pt
) sono quelli che vorresti usare nei supporti di stampa.
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. –
il parallelo alle percentuali è molto fuorviante, perché la percentuale non è collegata in modo inerente alla dimensione del font –
@ JanusTroelsen - Quando si tratta di dimensioni dei caratteri lo è. – Quentin
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.
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
@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
em: la
font-size
del carattere rilevante
ex: lax-height
del carattere rilevante
px: pixel, rispetto al dispositivo di visualizzazione
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.
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.
Per favore cita le tue fonti. – BoltClock
- 1. Perché Bootstrap 4 sceglie rem ed em invece px?
- 2. Devo usare em o px?
- 3. Qual è la differenza tra volatile ed esterno?
- 4. Qual è la differenza tra scalabilità ed elasticità?
- 5. Qual è la differenza tra modulo HTTP ed esprimere modle
- 6. Qual è la differenza tra contesto di interruzione ed eccezione?
- 7. In ember.js, qual è la differenza tra mixin ed extend?
- 8. Qual è la differenza tra execl ed execv?
- 9. Qual è la differenza tra OpenCV.NET, OpenCVSharp ed EmguCV?
- 10. In Hybris, qual è la differenza tra modulegen ed extgen?
- 11. Qual è la differenza tra risorsa ed endpoint?
- 12. Qual è la differenza tra trigger ed eventi in backbone?
- 13. Qual è la differenza tra mixin ed ereditarietà?
- 14. Qual è la differenza tra nohup ed e commerciale
- 15. Qual è la differenza tra spawn ed exec?
- 16. Qual è la differenza tra Transaction Manager ed Entity Manager
- 17. Qual è la differenza semantica tra ERANGE ed EOVERFLOW?
- 18. Qual è la differenza tra Lucene ed Elasticsearch
- 19. Qual è la differenza tra Executor ed ExecutorService?
- 20. Qual è la differenza tra Amazon AMI ed EBS snapshot
- 21. Qual è la differenza tra la dimensione del font css usando em e percentuali?
- 22. Stile CSS - percentuali contro em vs px?
- 23. Differenza tra interrupt ed evento
- 24. Differenza tra catch (Exception) e Catch (eccezione ex)
- 25. Cambiare la larghezza usando jQuery .css() ed em
- 26. Qual è la differenza tra = e: =
- 27. Qual è la differenza tra Verilog! e ~?
- 28. Qual è la differenza tra queste funzioni?
- 29. Qual è la differenza tra? : e ||
- 30. qual è la differenza tra [[], []] e [[]] * 2
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. –
em, px, pt, percentuale. Qual è la differenza ? Alcune informazioni qui: http://markupjavascript.blogspot.in/2013/10/em-px-pt-percent-what-is-difference.html –
Penso che questa sia una domanda duplicata, puoi trovare la stessa qui http://stackoverflow.com/questions/3333076/difference-between-px-and-em/25540376 – Phuc