Qual è la differenza tra pte pxin CSS? Quale dovrei usare e perché?

px ≠ Pixel

Tutte queste risposte sembrano essere errate. Contrariamente all'intuizione, nei CSS px non si tratta di pixel . Almeno, non nel semplice senso fisico.

Leggi questo articolo del W3C , EM, PX, PT, CM, IN ... , su come pxviene inventata un'unità "magica" per i CSS. Il significato di pxvaria a seconda dell'hardware e della risoluzione. (Quell'articolo è fresco, ultimo aggiornamento 2014-10.)

Il mio modo di pensarci: 1 px is the size of a thin line intended by a designer to be barely visible.

Per citare quell'articolo :

L'unità px è l'unità magica del CSS. Non è correlato al carattere corrente e non è neppure correlato alle unità assolute. L'unità px è definita come piccola ma visibile e tale che una linea orizzontale larga 1px può essere visualizzata con spigoli vivi (senza anti-aliasing). Ciò che è nitido, piccolo e visibile dipende dal dispositivo e dal modo in cui viene utilizzato: lo tieni vicino ai tuoi occhi, come un telefono cellulare, a distanza di braccia, come un monitor di un computer o in qualche punto nel mezzo, come un libro? Il px non è quindi definito come una lunghezza costante, ma come qualcosa che dipende dal tipo di dispositivo e dal suo uso tipico.

Per avere un'idea dell'aspetto di un px, immagina un monitor CRT degli anni '90: il punto più piccolo che può visualizzare misura circa 1/5 di pollice (0,25 mm) o poco più. L'unità px ha preso il nome da quei pixel dello schermo.

Al giorno d'oggi ci sono dispositivi che in linea di principio potrebbero visualizzare punti più piccoli (anche se potrebbe essere necessario un ingranditore per vederli). Ma i documenti del secolo scorso che utilizzavano px in CSS sembrano sempre gli stessi, indipendentemente dal dispositivo. Le stampanti, in particolare, possono visualizzare linee nitide con dettagli molto più piccoli di 1px, ma anche sulle stampanti, una linea di 1px è molto simile a come apparirebbe sul monitor di un computer. I dispositivi cambiano, ma il px ha sempre lo stesso aspetto visivo.

Questo articolo fornisce alcune indicazioni sull'uso di ptvs pxvs em, per rispondere a questa domanda.

Qui hai una spiegazione molto dettagliata delle loro differenze

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

Il jist di esso (dalla fonte)

I pixel sono unità di dimensioni fisse utilizzate nei supporti dello schermo (ovvero da leggere sullo schermo del computer). Pixel sta per "elemento immagine" e come sai, un pixel è un piccolo "quadrato" sullo schermo. I punti vengono usati tradizionalmente nei supporti di stampa (tutto ciò che deve essere stampato su carta, ecc.). Un punto equivale a 1/72 di pollice. I punti sono molto simili ai pixel, in quanto sono unità di dimensioni fisse e non possono ridimensionarsi.

Dai un'occhiata a questo eccellente articolo su CSS-Tricks:

• px - em -% - pt - parola chiave

Tratto dall'articolo:

pt

L'unità di misura finale in cui è possibile dichiarare le dimensioni dei caratteri è il valore in punti (pt). I valori dei punti sono solo per CSS di stampa! Un punto è un'unità di misura utilizzata per la tipografia di inchiostro su carta nella vita reale. 72 punti = un pollice. Un pollice = un pollice real-like-on-a-righello nella vita reale. Non un pollice su uno schermo, che è totalmente arbitrario in base alla risoluzione.

Proprio come i pixel sono estremamente precisi sui monitor per il dimensionamento dei caratteri, le dimensioni dei punti sono estremamente accurate sulla carta. Per i migliori risultati tra browser e multipiattaforma durante la stampa di pagine, imposta un foglio di stile di stampa e ridimensiona tutti i caratteri con dimensioni in punti.

Per buona ragione, il motivo per cui non utilizziamo le dimensioni in punti per la visualizzazione dello schermo (a parte l'assurdo), è che i risultati tra browser sono drasticamente diversi:

px

Se hai bisogno di un controllo accurato, dimensionare i caratteri in valori di pixel (px) è una scelta eccellente (è il mio preferito). Sullo schermo di un computer, non è più preciso di un singolo pixel. Con il dimensionamento dei caratteri in pixel, stai letteralmente dicendo ai browser di rendere le lettere esattamente quel numero di pixel in altezza:

Windows, Mac, alias, anti-alias, cross-browser, non importa, un font impostato su 14px sarà alto 14px. Ma questo non vuol dire che non ci saranno ancora alcune variazioni. In un rapido test di seguito, i risultati sono stati leggermente più coerenti rispetto alle parole chiave ma non identici:

A causa della natura dei valori dei pixel, non si sovrappongono. Se un elemento padre ha una dimensione in pixel di 18 pixel e il figlio è 16 pixel, il figlio sarà 16 pixel. Tuttavia, le impostazioni di dimensionamento dei caratteri possono essere utilizzate in combinazione. Ad esempio, se il genitore fosse impostato su 16px e il bambino fosse impostato su più grande, il bambino sarebbe effettivamente uscito più grande del genitore. Un rapido test mi ha mostrato questo:

"Più grande" ha portato il 16px del genitore in 20px, con un aumento del 25%.

I pixel hanno avuto un brutto periodo in passato per problemi di accessibilità e usabilità. In IE 6 e versioni precedenti, le dimensioni dei caratteri impostate in pixel non possono essere ridimensionate dall'utente . Ciò significa che noi giovani designer sani possiamo impostare il 12px e leggerlo sullo schermo bene, ma quando le persone un po 'più a lungo nel dente vanno ad aumentare le dimensioni in modo che possano leggerlo, non sono in grado di farlo. Questa è davvero colpa di IE 6, non nostra, ma otteniamo ciò che facciamo e dobbiamo affrontarlo.

L'impostazione della dimensione del carattere in pixel è il metodo più accurato (e trovo il più soddisfacente), ma prendi in considerazione il numero di visitatori che usano ancora IE 6 sul tuo sito e le loro esigenze di accessibilità. Siamo proprio sul punto di non aver più bisogno di preoccuparcene.

Un pt è 1/72 di pollice ed è una misura inutile per tutto ciò che viene reso su un dispositivo che non calcola correttamente il DPI. Questo lo rende una scelta ragionevole per la stampa e una terribile scelta per l'uso sullo schermo.

Un px è un pixel, che nella maggior parte dei casi verrà mappato su un pixel dello schermo.

Il CSS fornisce un sacco di altre unità e quale scegliere dovresti scegliere da cosa stai impostando la dimensione.

Un pixel è ottimo se devi dimensionare qualcosa per abbinare un'immagine o se vuoi un bordo sottile.

Le percentuali sono ottime per le dimensioni dei caratteri poiché, se le usi in modo coerente, ottieni dimensioni dei caratteri proporzionali alle preferenze dell'utente.

Gli sms sono grandi quando vuoi che un elemento si ridimensioni in base alla dimensione del carattere (quindi un paragrafo potrebbe allargarsi se la dimensione del carattere è più grande)

… e così via.

pt è una derivazione (abbreviazione) di "punto" che storicamente veniva usata nelle facce del tipo di stampa in cui la dimensione veniva comunemente "misurata" in "punti" in cui 1 punto ha una misura approssimativa di 1/72 di pollice, e quindi un 72 il carattere punto sarebbe di 1 pollice di dimensione.

px è un'abbreviazione di "pixel" che è un semplice "punto" su uno schermo o una stampante a matrice di punti o altra stampante o dispositivo che esegue il rendering in modo a punti - a differenza delle vecchie macchine da scrivere che avevano una dimensione fissa, un attaccante solido che ha lasciato un'impronta del personaggio premendo su un nastro, lasciando così un'immagine di dimensioni fisse.

Strettamente correlati al punto sono i termini "maiuscoli" e "minuscoli" che storicamente avevano a che fare con la selezione dei caratteri tipografici fissi in cui i caratteri "prigionieri" erano collocati in una scatola (caso) sopra i caratteri non catturati che erano posizionati in una casella in basso, e quindi il caso "inferiore".

C'erano scatole (casi) diversi per caratteri e dimensioni tipografici diversi, ma ancora e maiuscole e minuscole per ognuna di esse.

Un altro termine è la "pica" che è una misura di un carattere nel carattere, quindi una pica è 1/6 di pollice o 12 unità di misura (12/72) di misura.

In parole povere, la misurazione è su computer da 4,233 mm o 0,166 pollici, mentre il vecchio punto (americano) è 1 / 72,27 pollici e il francese è 4,512 mm (0,177 pollici). Quindi la mia affermazione di "approssimativa" per quanto riguarda le misure.

Inoltre, le macchine da scrivere usate negli uffici avevano o una dimensione "Elite" o "Pica" in cui le dimensioni erano ripetutamente di 10 e 12 caratteri per pollice.

Inoltre, il "punto", prima della standardizzazione, si basava sulla dimensione del "piede" dei tipografi in metallo, la dimensione dell'impronta di base di un personaggio e variava in qualche misura.

Si noti che un "piede" tipografico proveniva originariamente da un piede reale delle stampanti decedute. Un piede tipografico contiene 72 picas o 864 punti.

Per quanto riguarda l'uso dei CSS, preferisco usare EM piuttosto che px o pt, ottenendo così il vantaggio di ridimensionare senza perdita di posizione e dimensioni relative.

EDIT: Solo per completezza puoi pensare a EM (em) come un elemento di misura dell'altezza di un font, quindi 1em per un font 12pt sarebbe l'altezza di quel font e 2em sarebbe il doppio di quella altezza. Nota che per un font 12px, 2em è 24 pixel. SO 10px è in genere 0,63 em di un carattere standard poiché la maggior parte dei browser si basa su 16px = 1em come dimensione del carattere standard.