Query per larghezza, altezza e orientamento
Indirizzi dimensioni specifiche del viewport e orientamenti del dispositivo con le media feature.
Query per larghezza, altezza e orientamento è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 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.
Funzionalità media width
La funzionalità width seleziona la larghezza del viewport. Usa min-width e max-width per definire gli intervalli.
<div class="box">width feature demo</div>
Funzionalità media height
La funzionalità height seleziona l'altezza del viewport. È utile per i viewport corti, come quelli dei telefoni in orientamento orizzontale, dove lo spazio verticale è limitato.
<div class="hero">Hero (grows on tall viewports)</div>
Schema per viewport corti
Rileva i viewport corti e riduci padding o altezze che causerebbero la fuoriuscita del contenuto:
<div class="modal">Modal content that scrolls when the viewport is short. Lorem ipsum dolor sit amet, consectetur.</div>
orientation: portrait e landscape
La funzionalità orientation rileva se il viewport è più alto (portrait) o più largo (landscape) rispetto all'altra direzione.
<div class="hero">Orientation-aware hero</div>
Device Pixel Ratio
Seleziona gli schermi ad alta densità di pixel (Retina) con la funzionalità resolution o con la funzionalità non standard, ma ampiamente supportata, -webkit-device-pixel-ratio.
<div class="logo"></div>
Funzionalità aspect-ratio
Seleziona specifici rapporti d'aspetto del viewport. È utile per centrare il contenuto in modo diverso nei viewport 4:3 e 16:9.
<div class="video"></div>
Supporto hover
La funzionalità hover: hover rileva se l'input principale è un dispositivo di puntamento preciso che supporta il passaggio del puntatore. È utile per gli stili specifici dei dispositivi touch.
<div class="card">Card (hover me)</div>
<div class="card is-hovered">Card (hover state shown)</div>
Funzionalità pointer
pointer: fine indica un cursore del mouse preciso; pointer: coarse indica un dito o uno stilo. È utile per adattare le dimensioni delle aree di tocco.
<button>Tap target</button>
Combinare width e height
Crea regole specifiche per i telefoni in orientamento orizzontale combinando min-width con max-height:
<div class="nav">Nav bar</div>
Dimensioni del viewport e del dispositivo
Le media query CSS selezionano il viewport, ovvero la finestra del browser, non le dimensioni fisiche dello schermo del dispositivo. Ridimensionare la finestra di un browser desktop modifica in tempo reale la larghezza del viewport.
Unità del viewport e media query
Le media query e le unità del viewport (vw, vh) rispondono alle stesse dimensioni del viewport. Usa le media query per modificare il layout e le unità del viewport per il dimensionamento fluido all'interno di un layout.
Verifica rapida
Quale funzionalità media rileva se un dispositivo dispone di un dispositivo di puntamento preciso che può passare sopra gli elementi?
Riepilogo
Le funzionalità media includono width, height, orientation, resolution, hover e pointer. Usale per adattare i layout alle dimensioni del viewport e alle capacità del dispositivo. Le funzionalità hover e pointer aiutano a distinguere i dispositivi touch da quelli con mouse, oltre la sola dimensione dello schermo.
Domande Frequenti
La lezione «Query per larghezza, altezza e orientamento» è gratuita?
Sì — il testo completo di «Query per larghezza, altezza e orientamento» è 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 «Query per larghezza, altezza e orientamento»?
Indirizzi dimensioni specifiche del viewport e orientamenti del dispositivo con le media feature. 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 2 di 4.
Quanto tempo richiede la lezione «Query per larghezza, altezza e orientamento»?
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
- Sintassi e breakpoint comuni
- Query per larghezza, altezza e orientamento
- Prefers-Color-Scheme e Prefers-Reduced-Motion
- Combinare più media query