CSS Academy · Lezione

Unità assolute: px, pt, cm

Imparate quando utilizzare unità assolute fisse come pixel, punti e centimetri.

Unità assolute: px, pt, cm è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Unità assolute e relative

Le unità CSS rientrano in due categorie: assolute (misure fisse del mondo reale) e relative (in scala rispetto a qualcos'altro). Le unità assolute sono misure fisiche indipendenti dal dispositivo.

px — Pixel

Il pixel (px) è l'unità assoluta più utilizzata sugli schermi. Nei display standard, 1px = 1 pixel del dispositivo. Sugli schermi ad alta densità (Retina), i pixel CSS corrispondono a più pixel del dispositivo, mantenendo invariata la dimensione visiva degli elementi.

<button class="button">10px 20px padding</button>

pt — Punti

Il punto (pt) è un'unità della progettazione per la stampa: 1pt = 1/72 di pollice. In CSS, 1pt = 4/3px (circa 1,33px). Viene utilizzato principalmente nei fogli di stile per la stampa e la tipografia.

<p class="print-text">This text is sized in points (12pt), the unit used in print stylesheets.</p>

cm, mm, in — Unità fisiche

CSS supporta centimetri (cm), millimetri (mm) e pollici (in). Queste unità sono appropriate per la stampa, ma risultano inaffidabili sugli schermi perché la densità dei pixel varia.

<div class="page">A4-width page (21cm), used for print layouts</div>

px sugli schermi: uso pratico

Per la progettazione web destinata agli schermi, px è l'unica unità assoluta realmente pratica. Anche in questo caso, è sconsigliato utilizzare px per le dimensioni dei caratteri, perché sovrascrive le preferenze dell'utente relative alla dimensione dei caratteri nel browser.

Rapporto tra pixel del dispositivo

I display moderni hanno un rapporto tra pixel del dispositivo (DPR) > 1. Uno schermo Retina 2x visualizza 2 pixel del dispositivo per ogni pixel CSS. Per questo motivo, le immagini ad alta densità devono avere dimensioni 2 o 3 volte superiori a quelle di visualizzazione.

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect width='400' height='300' fill='%23ff6347'/><circle cx='200' cy='150' r='100' fill='%231e90ff'/></svg>" alt="sample image" />

Quando utilizzare px

Utilizzi px per:

Larghezze dei bordi (1px è nitido)
Ombre e trasformazioni
Breakpoint delle media query (anche se i breakpoint basati su em sono più robusti)
Elementi fissi dell'interfaccia quando è necessario un controllo preciso sui pixel

Quando NON utilizzare px per la tipografia

Impostare font-size: 16px su html o body sovrascrive le preferenze di accessibilità dell'utente in molti browser. Utilizzi invece rem in relazione al valore predefinito del browser.

Q — Quarto di millimetro

L'unità q equivale a 1/4 di millimetro. Viene utilizzata nella tipografia giapponese per la stampa, per un controllo tipografico preciso. È usata raramente nella progettazione web generale.

PC — Pica

Una pica (pc) equivale a 12 punti o a 1/6 di pollice. Come i punti, le pica sono unità tipografiche per la stampa, raramente necessarie sugli schermi digitali.

Unità assolute nei fogli di stile per la stampa

I fogli di stile per la stampa rappresentano il principale caso d'uso appropriato delle unità assolute in CSS. Le unità fisiche garantiscono dimensioni accurate della pagina stampata su carta.

<div class="print-body">
    <p class="page-break">Section one (page breaks after this when printed)</p>
    <p>Section two</p>
  </div>

Verifica rapida

Quale unità CSS assoluta equivale a 1/72 di pollice?

Riepilogo

Le unità assolute sono misure fisse, indipendenti dagli elementi genitori. px è l'unità pratica per gli schermi. Le unità fisiche (pt, cm, in) vengono utilizzate nei fogli di stile per la stampa. Eviti di utilizzare px per la tipografia: sovrascrive le preferenze dell'utente relative alla dimensione dei caratteri. Utilizzi invece rem.

Domande Frequenti

La lezione «Unità assolute: px, pt, cm» è gratuita?

Sì — il testo completo di «Unità assolute: px, pt, cm» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Unità assolute: px, pt, cm»?

Imparate quando utilizzare unità assolute fisse come pixel, punti e centimetri. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Unità assolute: px, pt, cm»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a CSS Academy