Rendi il layout funzionale sui telefoni.

Le tue pagine si adattano da sole a telefoni e tablet: le colonne stanno fianco a fianco sugli schermi larghi e si impilano su quelli piccoli. Questa pagina mostra come prendere il controllo. Imposti un layout di colonna per dimensione di schermo, specchi l’ordine sugli schermi larghi e mostri gli elementi solo su alcuni dispositivi. L’esempio trasforma una riga di quattro colonne in due per due sui tablet.

Il video nasconde una foto sui telefoni, poi restringe la finestra per mostrarne la sparizione.

Prima di iniziare

• Una riga con quattro colonne uguali nella pagina; vedi Righe e colonne.

Scegli un layout per dimensione di schermo

1. Passa sopra la riga con il mouse e fai clic sull’icona griglia nella sua barra di controllo. La finestra dei layout si apre con un pannello Medium devices (≥ 768px).
2. Fai clic su Add screen size. Si apre un secondo pannello, impostato a Extra small (< 576px).
3. Nel menu a discesa di quel pannello, scegli Small devices (≥ 576px).
4. Fai clic su Custom Layout, digita 1/2 + 1/2 + 1/2 + 1/2 e fai clic su Save.
5. Fai clic su Save sulla barra.

Quattro metà mantengono tutte e quattro le colonne e ne mettono due per riga. Il riquadro con due colonne uguali ridurrebbe la riga a due colonne su ogni dimensione di schermo.

Cosa vedrai

Su un desktop le quattro colonne stanno ancora in una riga. Restringi la finestra del browser sotto i 768 pixel e vanno a capo due per due. Sotto i 576 pixel si impilano, una per riga, nell’ordine che vedi nell’editor.

Un layout vale dalla sua dimensione di schermo in su, finché una dimensione maggiore ha il suo layout. Ogni riga nuova inizia con un layout per Medium devices (≥ 768px), quindi le sue colonne si impilano su telefoni e piccoli tablet. Remove screen size in un pannello elimina di nuovo quel layout.

Specchia l’ordine sugli schermi larghi

Apri il menu More della riga, scegli Settings e attiva Mirror row. Da 768 pixel in su, le colonne si mostrano in ordine inverso; sugli schermi più piccoli si impilano nell’ordine dell’editor.

Usalo per righe alternate di immagine e testo. Metti l’immagine prima nell’editor, così i telefoni la mostrano sopra il testo, e specchia ogni seconda riga così i desktop mostrano l’immagine a destra.

Mostra o nascondi un elemento per dimensione di schermo

1. Apri il menu More dell’elemento e scegli Settings.
2. In HTML classes, scegli un chip dal gruppo Responsive Visibility, ad esempio Hidden on extra small devices, phones (<576px).
3. Fai clic su Save.

Ogni chip Hidden on nasconde l’elemento su una sola dimensione di schermo. Ogni chip Visible on lo mostra su quella dimensione e lo nasconde ovunque altro.

Dimensioni di schermo

Un elemento Positioned layers ha il suo toggle Responsive, spento per impostazione predefinita. Accendilo per scalare l’altezza del canvas e il suo testo con la larghezza della finestra, così la composizione mantiene le proporzioni.

Se non vedi la modifica

• Le colonne si impilano ancora su un tablet. La riga non ha layout per quella dimensione di schermo, quindi le colonne si impilano sotto i 768 pixel. Apri l’icona griglia della riga, fai clic su Add screen size e scegli Small devices (≥ 576px).
• Un elemento è sparito su ogni dimensione di schermo. Porta due chip Visible on, e ciascuno lo nasconde dove l’altro lo mostra. Tienine uno, oppure usa chip Hidden on, uno per dimensione da nascondere.
• Mirror row non fa niente su un telefono. Mirror row funziona da 768 pixel in su. Per cambiare l’ordine sui telefoni, sposta invece le colonne nell’editor.

Prossimi passi

• Righe e colonne: costruisci le righe che rendi responsive qui.
• Modifica una pagina su telefono o tablet: controlla e sistema le pagine su uno schermo piccolo.
• Estendi una sezione da bordo a bordo: decidi quanto è largo il tuo contenuto.