Il dibattito su em VS px VS% in tipografia è ancora valido


8

Ho letto alcuni articoli sul perché sono migliori di px in tipografia. E la base deve essere in%, la cosa migliore è persino avere body{ font-size:62.5%; }.

Uno degli articoli migliori che ho trovato si trova qui: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Fondamentalmente si dice che px non si adatta bene a siti Web e dispositivi. Ho sempre fatto tipografia in px e non ho mai riscontrato problemi. Ho anche lavorato con alcuni framework CSS e alcuni temi wordpress e vedo sempre che viene utilizzato solo il normale px.

Ora vedo che la maggior parte degli articoli sono scritti e sono per lo più di alcuni anni fa, volevo sapere se è ancora vero che px non si adatta bene o non è più un punto per i browser e i dispositivi moderni .


In una nota a margine. Ho anche letto e visto in alcuni siti che le persone si spingono così lontano per fare tutto il loro stile in loro. Ad esempio l'imbottitura e i margini vengono eseguiti in em.

È necessario se si desidera avere un buon sito Web di ridimensionamento.


2
Per rendere le cose ancora più confuse, la maggior parte dei browser moderni supporta ems o rems relativi snook.ca/archives/html_and_css/font-size-with-rem .
paulmorriss,

C'è una risposta più recente e migliore su StackOverflow: stackoverflow.com/questions/11799236/…
Denis de Bernardy,

Risposte:


3

La mia risposta, poiché il testo stesso è un "no" definito. I buoni browser imbrogliano (come dovrebbero) quando si tratta di ridimensionare i caratteri specificati in unità di pixel. Lo sviluppatore web dovrebbe essere ritenuto indipendente da eventuali differenze nei dispositivi su cui viene eseguito il rendering del contenuto.

Prova questo nell'editor Try3 di w3Schools :

<html>
<body>
<p style="font-size:1em">This is a paragraph.</p>
<p style="font-size:12pt">This is a paragraph.</p>
<p style="font-size:16px">This is a paragraph.</p>
<p style="font-size:100%">This is a paragraph.</p>
</body>
</html>

Quindi tenere premuto Ctrl e scorrere con la rotellina del mouse o premere Ctrl-Numerico +. Dovrebbero ridimensionare tutti in modo uniforme in un buon browser.

Non è garantito che i pixel siano uniformemente larghi quanto più in alto, più chiaro che la risoluzione è sempre di 96 DPI e le preferenze dell'utente potrebbero essere applicate per l'upscaling o il downscaling di tutti i contenuti. Tenendo conto di ciò, la maggior parte dei browser tiene conto di queste differenze di risoluzione e ridimensiona l'output in base all'hardware / alle preferenze specifiche. Se un browser applicasse rigorosamente le unità pixel effettive, il browser (o il dispositivo hardware su cui gira) sarebbe condannato a essere percepito come un errore dall'utente finale.

Detto questo, tieni presente che l'HTML non è ottimizzato per il ridimensionamento, ma per reindirizzare il testo alla più ampia gamma di proporzioni di risoluzione possibile (larghezza divisa per altezza). I browser differiscono nell'imbottitura e nei margini di ridimensionamento quando specificati in unità diverse. Per i progetti veramente scalabili (ad esempio, dove la posizione sullo sfondo è importante) si dovrebbe considerare l'utilizzo di un formato scalabile e non scorrevole come SVG . Fare imbottiture e margini in percentuale è sempre rischioso!

Se stai usando uno sfondo di immagine o simile e vuoi che il riempimento o il margine siano un numero specifico di pixel verso l'interno, il mio consiglio è di essere sicuro di specificare quei margini e il riempimento in unità di pixel!


1
Solo un punto da notare: la funzionalità "Dimensione testo" in IE non ridimensionerà i caratteri che sono stati risolti esplicitamente usando pto px.
Zhaph - Ben Duguid,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.