Forum libero

- Scritto da: alex.tg
> Ho notato che quel CMS che stavo mettendo
> insieme, quando lo vedo sull'iFon, ha bisogno di
> specificare un corpo carattere di almeno 2em nel
> body, se no viene fuori testo lillipuziano. In
> proporzione, le icone di dimensioni specificate
> in pixels, sono piu` piccole. La sensazione e`
> che l'iFon riduca un po'
> tutto.
>
> Mi chiedevo: ma non e` che ci sono trucchetti
> particolari per un layout "handheld" che si veda
> bene su un handheld?
>

Ci sono due tipi di unità: relative e assolute.
Le dimensioni assolute non cambiano in base al monitor, alla risoluzione, ecc. Queste sono:

* Assolute
- in (inch)
- cm (centimetri)
- mm (millimetri)
- pt (points = 1/72 inch)
- pc (pica = 1/6 inch)

* Relative
- % (percentuale)
- em (altezza della lettera M maiuscola, corrisponde alla dimensione del font [1em == 100% font size del valore precedente])
- ex (altezza della lettera x minuscola)

Poi ci sono i pixel (px) che si possono inserire fra le misure relative poiché dipendono dalla dimensione del pixel sul monitor (quindi dalla risoluzione).

Quando si incomincia a scrivere il CSS di un sito web è bene partire con quelli che si chiamano "reset" stylesheet. Servono ad azzerare le differenze fra i vari browser e partire da una base comune. I vari browser infatti differiscono anche di molto circa i font, i margini, i padding, ecc... soprattutto per quanto riguarda le Form, è bene quindi inserire nel proprio CSS come prima cosa il comando:
@import "reset.css";
che caricherà il file "reset.css" con i comandi necessari al reset del foglio di stile del browser (per partire da "tabula rasa").

Un esempio di foglio di stile di reset è questo:
http://yui.yahooapis.com/2.8.1/build/reset/reset-m...

Subito dopo l'import definiamo il font-size e il font-family nel tag "body" del CSS. Il font-size è bene sia espresso in "pt" (points) in questo modo, qualsiasi sia il dispositivo, la dimensione del font sarà sempre quella.
Successivamente, tutto ciò che conterrà il body, avrà i font specificati in _percentuale_. In questo modo cambiando il font-size del body cambierà il font-size di tutto il resto della pagina perché è relativo a quello.

Se la pagina ha bisogno di essere renderizzata in modo diverso in base allo strumento utilizzato per visualizzarlo (schermo [screen], stampa [print], dispositivo mobile [handheld], televisione [tv], ecc) è possibile usare all'interno del CSS le così dette "at-rules".

Esempio:

@import "reset.css";

body {
  font-size: 9pt;
  font-family: Tahoma, Arial, sans-serif;
}

h1 {
  font-size: 140%;
  color: blue;
  text-shadow: 3px 2px 3px black;
}

@media handheld {
  body {
    font-size: 8pt;
  }

  h1 {
    color: red;
    text-shadow: none;
  }
}

Nell'esempio sopra la pagina userà il font di dimensione 9pt come base per lo schermo, la stampa, la tv, ecc... mentre per i dispositivi mobili userà il font di dimensione 8pt. Inoltre, gli header di tipo 1, per tutti i browser (che lo supportano, quindi non IE) saranno renderizzati con un ombra che ne risalta il testo, mentre per i dispositivi mobili l'ombra svanisce e il testo cambia colore.
-----------------------------------------------------------
Modificato dall' autore il 10 luglio 2010 02.32
-----------------------------------------------------------