Una guida rapida ai punti di rottura verticale

Benvenuto in un altro tutorial Envato Tuts + screencast! In questo video ti darò una breve introduzione all'uso dei punti di interruzione verticali CSS.

I punti di interruzione sono sinonimi di web design reattivo; sono i punti in cui scegli di modificare il layout di un disegno. Ad esempio, 768px è una larghezza di viewport comunemente utilizzata, al di sotto della quale potresti voler organizzare il layout per i dispositivi mobili e oltre il quale potresti pensare di più in termini di desktop. 

Tuttavia, i punti di interruzione non si applicano solo orizzontalmente, alla larghezza di una finestra; potrebbero entrare in vigore per una serie di motivi diversi. In questo tutorial esamineremo i breakpoint verticali, che sono applicati in relazione all'altezza di una finestra. Li usiamo con il min-height e altezza massima proprietà all'interno delle query multimediali CSS. Diamo un'occhiata più profonda.

In questo video guardiamo i seguenti scenari:

• Modifica della spaziatura e delle dimensioni dei caratteri nelle finestre brevi.
• Regolazione delle dimensioni di navigazione mobile su finestre brevi.
• Rendere fissa un'intestazione o un piè di pagina, solo quando c'è spazio sufficiente.
• Regolazione delle sezioni a schermo intero per viewport brevi.

Assicurati di scaricare i file sorgente per seguirli.

Ulteriori letture