Unità di misura, EM

[ricman]

Ho cercato qualche guida/esempio perchè incuriosito da questa unità di misura (em). Se chido qui è perchè non ho trovato la spiegazione giusta.
Come funziona? Quando e per cosa è meglio usarlo?

Io per i miei siti uso esclusivamente i px (es: font-size:12px o width:300px ...). E' sbagliato? Si consigliano altre unita di misura?

Tnx

[thomas_anderson]

I px sono un unità di misura in teoria relativa, in quanto si riferiscono alla risoluzione dello schermo. I browser conformi permettono il ridimensionamento dei pixel, IE no. quindi questo è il motivo base per usare unità relative come gli em e le %. l'em deriva il suo nome dalle dimensioni della lettera minuscola "m". Fondamentalmente esiste questa relazione approssimativa:

1em = 100% = 14px

Questo poi varia da font a font, a seconda dei loro glifi particolari. per esempio 1em di Georgia è diverso da Times New Roman, che a sua volta differisce da Arial. per maggiori info:
http://www.w3.org/TR/REC-CSS2/fonts.html che sto appunto traducendo. leggi anche la sezione sui tipi fondamentali: http://www.w3.org/TR/REC-CSS2/syndata.html



ps. gli em applicati alla 'width' o 'height' hanno dei problemi diversi nel calcolo delle dimensioni di un box. comunque puoi ottenere buoni risultati con gli em anche su IE, che sembra digerirli meglio rispetto alle percentuali. infatti IE ha dei problemi nel posizionamento. ti consiglio di leggere gli articoli su Html.it o le risorse su http://www.constile.org/

http://www.constile.org/tutorial/com...e_i_caratteri/

glifo = rappresentazione grafica del carattere vedi
http://en.wikipedia.org/wiki/Glyph

[ricman]

Originariamente inviato da thomas_anderson
I px sono un unità di misura in teoria relativa, in quanto si riferiscono alla risoluzione dello schermo.

Ecco ma... 740px sono 740px a qualsiasi risoluzione del monitor, sia esso a 800x600 che a 1280x1024. Quindi per dare un layout "fisso" ai div forse è meglio il px.
Forse la cosa cambia per i testi... devo finire di leggere le guide... anche se, ad esempio, il link di constile.org che mi hai passato fa vedere alcuni esempi. Io uso FF e gli esempi non danno l'impressione di seguire quello che dice la guida (tipo "riesci a leggere questa riga?" io lo vedo tutto uguale!)

[thomas_anderson]

Il layout fisso va bene fino ad un certo punto. se hai un layout molto grande non puoi dare 900px a un box. se dai invece un 90% le cose vanno sicuramente meglio, perchè cambia e si adatta alle dimensioni della finestra. stessa cosa con gli em. è una questione di flessibilità. la risoluzione base è 800x600, ma in condizioni particolari un utente può anche decidere di scendere a 640. senza contare poi i palmari e i cellulari.

ps. io con FF lo vedo bene l'esempio.

[ricman]

Originariamente inviato da thomas_anderson
Il layout fisso va bene fino ad un certo punto. se hai un layout molto grande non puoi dare 900px a un box. se dai invece un 90% le cose vanno sicuramente meglio, perchè cambia e si adatta alle dimensioni della finestra. stessa cosa con gli em. è una questione di flessibilità. la risoluzione base è 800x600, ma in condizioni particolari un utente può anche decidere di scendere a 640. senza contare poi i palmari e i cellulari.

Originariamente inviato da thomas_anderson
ps. io con FF lo vedo bene l'esempio.

Il che mi lascia perplesso...
Questo link:
http://www.constile.org/tutorial/com...e_i_caratteri/

Dove fa l'esempio:
CSS

[...]
.smaller { font-size:0.80em }
.bigger { font-size:1.25em }
[...]

E sotto c'è scritto:

Il risultato è riportato qui di seguito:
Questo testo è come il corpo dell'articolo
Riuscite a leggere questo testo?
Riuscite a leggere questo testo?
Riuscite a leggere questo testo?
Riuscite a leggere questo testo?
Probabilmente dalla terza riga in poi, il testo risulterà illegibile.

Io lo vedo tutto di uguale dimensione: tutto uguale al resto del testo normale del sito...

[Mich_]

Questo e` il codice HTML/CSS del pezzo in questione:

<div style="border: 1px solid rgb(204, 204, 204); padding: 5px;">Questo testo è come il corpo dell'articolo 
  <div class="smaller">Riuscite a leggere questo testo? 
    <div class="smaller">Riuscite a leggere questo testo? 
      <div class="smaller">Riuscite a leggere questo testo? 
        <div class="smaller">Riuscite a leggere questo testo?</div>
      </div> 
    </div>
  </div>
</div>

Tieni presente che i browser piu` seri (i piu` recenti) hanno un limite inferiore ai caratteri, che puo` essere impostato dall'utente.
In FF: edit > preferences > general > fonts & colors > minimum font size