Pixel controPunti in HTML/CSS

https://stackoverflow.com/questions/6389914

29-10-2019
|

Domanda

Quando creo una pagina HTML, dovrei specificare cose come marginè con pixel o con punti in CSS?

Uno di essi è considerato una pratica migliore dell'altro?Ci sono vantaggi o svantaggi per uno dei due?

Soluzione

Utilizzo px O em

DIMENSIONE CARATTERE CSS:EM VS.PX VS.PT VS.PER CENTO

Punti (pt): I punti sono tradizionalmente utilizzati 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, nel senso che sono unità di dimensione fissa e non possono ridimensionarsi.

Generalmente, 1em = 12pt = 16px = 100%.

[Conclusione]

Il vincitore: per cento (%).

Nota di JohnB: questo è per TESTO. Ovviamente hai chiesto di "cose come margini". (Presumo che tu intenda padding anche.) Per questo, lo consiglierei px O em.Personalmente cambio a seconda della situazione particolare.

ALTRI ARTICOLI

px – em – % – pt – parola chiave

I valori in punti sono solo per i CSS stampati!

(Commenta più in basso)

I punti sono per la stampa?No.

I punti non sono destinati esclusivamente alla stampa.In teoria, i punti servono a definire una misura assoluta.I pixel non sono assoluti, poiché a seconda dello schermo e della definizione scelta (non della risoluzione), la risoluzione (pixel per pollice) può variare da molto (150 dpi) a molto poco (75 dpi).Ciò significa che i tuoi pixel possono avere una dimensione, o forse la metà di quella dimensione.Ciò significa che il testo che progetti affinché sia perfettamente leggibile sul tuo schermo potrebbe apparire troppo grande sullo schermo del tuo cliente ("per favore rimpicciolisci il testo, ok?") o troppo piccolo per essere leggibile sullo schermo del tuo vicino ("ehi, il sito web che hai mi hai raccontato dell'altro giorno?quello su cui hai detto di aver lavorato… beh non sono riuscito a leggere molto bene il testo, è così piccolo”).

I punti sono una soluzione a questo problema.Ma i browser e i sistemi operativi devono gestirli.Fondamentalmente significa:

i browser devono calcolare la dimensione del display in pixel utilizzando il valore dato (ad esempio, 10pt) e la risoluzione reale dello schermo;i sistemi operativi devono comunicare la reale risoluzione attuale e non un valore predefinito.

Anche:

CSS:Confronto di dimensione carattere, percentuale, Em, punto e pixel

Altri suggerimenti

Le regole pratiche sono:

Pixel per la visualizzazione sullo schermo; punti per la stampa.

'em' o '%' (e il rem meno noto) sono migliori per un layout più flessibile.

em è un'unità di misura basata sulla dimensione della lettera "m" nel carattere corrente. Specificare le dimensioni in em ti consente di avere una dimensione basata sulla dimensione del carattere, il che significa che puoi cambiare il carattere e il layout cambierà per seguire l'esempio.

Ma ci sono molte volte in cui è necessario utilizzare una dimensione fissa. In tal caso, px di solito sarà il migliore, poiché la maggior parte delle pagine Web viene visualizzata su uno schermo basato sui pixel. Ma se hai intenzione di avere una pagina che viene stampata molto, potresti avere un foglio di stile specifico per la stampa con un layout basato sui punti.

In genere consiglierei em su px o pt. Se stai usando px, è perché hai elementi sulla tua pagina che sono dimensionati in pixel come le immagini, a cui hai bisogno del resto del layout per conformarti. In questo caso, poiché le immagini sono in pixel, lo stesso vale per i fogli di stile. Inoltre, poiché i punti sono un'unità di misura di stampa, non c'è garanzia di come appariranno sullo schermo: px è basato sullo schermo, quindi ti darà un aspetto molto più coerente su schermo cross-browser e multipiattaforma.

A proposito, questa pagina potrebbe darti ulteriori informazioni: http: / /webdesign.about.com/cs/typemeasurements/a/aa042803a.htm

I punti sono ottimi poiché sono alti 1/72 di pollice . Sai quanto sarà alto il tuo testo. Il problema con i pixel è che diventano più piccoli quanto più alta è la risoluzione. I pixel sono ottimi se desideri avvolgere il testo attorno a un'immagine di sfondo . Richiede un po 'di lavoro ma può creare una bella pagina. Ho sentito che i pixel non sono ridimensionabili in IE, quindi se vogliono aumentare la dimensione del carattere non possono. Non usare IE, quindi non posso dirlo. Ricorda di averlo sentito. Gli EM ti lasciano in balia di come la persona ha le dimensioni dei caratteri definite nel proprio browser. Ems e percentuali lo rendono facile. Uso sempre i punti.

[...]

No, i punti non sono i migliori . A chiunque trovi questo thread, dimentica di averlo letto. Questo è un forum di web design. Per visualizzare le pagine sui supporti dello schermo. I punti sono inclusi nei CSS esclusivamente ai fini del design di stampa. Per fogli di stile per supporti di stampa. Non sono scalabili come% e ems lo sono . Se sei un qualsiasi tipo di web designer, dovresti lavorare per rendere le tue pagine accessibili e l'utilizzo dei punti è uno sciopero contro questo fin dall'inizio.

http:// www. v7n.com/forums/coding-forum/17594-font-size-pixel-vs-point.html

È divertente, tutti rispondono "pixel o% / em" e non "pixel o punti".

Non sapevo ci fosse una differenza tra i due.

ulteriori informazioni

Modifica: ancora più informazioni ... quelle ufficiali!

Non specificare la dimensione del carattere in pt o altre unità di lunghezza assoluta per i fogli di stile dello schermo. Vengono visualizzati in modo incoerente tra le piattaforme e non possono essere ridimensionati dall'agente utente (ad esempio browser). Conserva l'uso di tali unità per lo styling su supporti con proprietà fisiche fisse e note (ad es. stampa) .

Chiunque ti dica di utilizzare i pixel è sbagliato . I pixel funzionano bene, ma semplicemente non sono necessari ... Mai! I punti sono un modo perfetto per specificare una misura assoluta e, per la scala su cui lavoriamo comunemente sul Web, il più delle volte non sono la misura preferita.

Oltre ai punti, ci sono anche pica, pollici, centimetri e così via. Scegliere uno di questi rispetto all'altro è un po 'come dire: "dovrei misurare questa stanza in piedi o pollici?" Lascia che il buon senso sia la tua guida. Porteranno tutti a termine il lavoro.

Em, che è emerso in alcune delle risposte, dovrebbe essere riservato per quando è appropriato. Vale a dire, "quando questa cosa scala, voglio che quest'altra cosa si riduca". Ecco a cosa servono le misure relative. So che non rientra nello scopo della tua domanda originale, ma ho dovuto affrontare alcune delle sciocchezze sul "usarli sempre".

A proposito, i pixel non sono uguali ai pixel fisici. Oggi, px in un foglio di stile significa 1/96 di pollice. Questo è il motivo per cui dico di non usarli. La maggior parte delle persone non lo sa. Li usano pensando di specificare i pixel effettivi. Non posso prendere sul serio queste persone con questo essere evidente (anche se non incolpo le persone, do la colpa alla natura confusa dello stato delle cose, motivo per cui faccio una campagna per la scomparsa dei pixel.). Inoltre, se i pixel significassero davvero pixel, sarebbero un modo orribile per specificare le dimensioni. Parla del fatto che le cose si rimpiccioliscono e crescono casualmente in base a risoluzioni dello schermo arbitrarie incontrollabili. Yikes! Stai lontano dai pixel !!! In pratica funzionano, ma solo a causa di tentativi invisibili da parte dei produttori di browser e della gente del sistema operativo, in teoria sono un modo orribilmente ambiguo per specificare le tue intenzioni.

La risposta di John B sopra è la migliore e più accurata. Volevo solo segnalare una possibile confusione creata dalla risposta sopra la sua. Un "em" in tipografia è la larghezza della lettera "m" nel carattere che hai scelto. Per specificare l'altezza di un carattere, gli stampatori / i tipografi hanno utilizzato "x height", che è l'altezza della x minuscola per un carattere.

Come sottolinea John, i pt sono un'unità di misura fissa pari a 1/72 di pollice. Poiché i monitor hanno densità di pixel variabili (72 / pollice, 96 / pollice ...) in genere non è un buon modo per dimensionare le cose nei documenti HTML.

L'em si riferisce direttamente alla vecchia unità di tipografia e rappresenta un'eccellente misura relativa. Man mano che le dimensioni dello schermo vengono ridimensionate, anche le dimensioni dei caratteri vengono ridimensionate. Se usi em per i margini, si ridimensionano in base alle dimensioni dei caratteri, il che è generalmente una buona cosa.

Ma, per i margini, il riempimento e tutto ciò che non è direttamente correlato ai caratteri, è meglio usare rem, o "em relativi". Il modo migliore per farlo è dichiarare inizialmente una dimensione del carattere predefinita per il tuo corpo o tag html. Qualcosa come body font-size= 16px è un buon punto di partenza. Quindi in qualsiasi altra parte del documento usa em per il testo e rem per tutto il resto. Oppure usa le percentuali. O funzionerà bene. Come em e rem, la tua% è relativa alla dimensione del carattere originale di 16px= 100%.

Tutto nel documento verrà ridimensionato rispetto all'impostazione iniziale per la dimensione del carattere del 100% a 16 px. In questo modo si utilizza una misurazione dei pixel solo una volta nel documento. Ciò è utile se in seguito si desidera impostare le query multimediali per regolare le dimensioni e i margini per adattarsi a diverse densità di pixel su diversi display del dispositivo. Devi solo avere query per quella dichiarazione iniziale nel tag body. Tutto il resto si adatterà relativamente a questo e non sarà necessario modificarlo.

solo un pensiero, maxw3st

Penso che dipenda da cosa stai cercando di fare.

Trovo che la domanda chiave sia: la distanza deve essere ridimensionata con la finestra?Alcune unità sono relative, altre (come pixel e punti) non lo sono: una breve descrizione è qui .

Non ho visto punti usati molto, px sembra più comune quando è necessaria una misurazione assoluta.

I pixel sono più estetici per me e credo che sia considerata una pratica migliore ...

La risposta è: dipende.Per cosa stai usando i tuoi margini?Sono parte integrante di un layout bilanciato e ridimensionabile o forniscono solo una grondaia attorno ai bordi?Le percentuali funzionano meglio nel primo caso e i pixel funzionano bene nel secondo.

Dovresti provare le diverse possibilità e determinare quale funziona meglio per il tuo documento.Poiché in questo caso non esistono "giusto e sbagliato", puoi scegliere la risposta che funziona meglio per te.

Uso i pixel per quasi tutto.

Per me, "sembra" di avere un controllo più preciso.

Per le poche cose di cui ho bisogno per ridimensionare dinamicamente con la finestra, utilizzo la percentuale.

<”EDIT:

Che cos'è "em"?

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow