Panoramica dei breakpoint
I breakpoint sono intervalli di pixel che corrispondono alla larghezza di diversi dispositivi desktop, ad esempio tablet e dispositivi mobili. Quando la larghezza di un dispositivo si trova all'interno dell'intervallo di pixel predefinito di un breakpoint, il layout del sito viene regolato in modo che il contenuto e il design siano ottimizzati per le dimensioni e l'orientamento di tale dispositivo. Ad esempio, se sto visualizzando un sito da un computer desktop, posso visualizzare il menu completo del sito, ma quando lo visualizzo sul mio dispositivo mobile, vedrò invece un menu hamburger.
Breakpoint di Flex
Il breakpoint principale di Flex è il desktop. Se apporti modifiche alla progettazione o al contenuto di un breakpoint desktop, le modifiche vengono applicate automaticamente agli altri breakpoint per desktop, tablet e dispositivi mobili. Se modifichi il contenuto, ad esempio aggiungendo un widget, sostituendo un'immagine o modificando il testo, la modifica si applicherà automaticamente a tutti gli altri breakpoint, indipendentemente da quello in cui è stata apportata la modifica.
Tuttavia, se si apportano modifiche alla posizione o alle dimensioni di un elemento su breakpoint specifici, le modifiche non si applicheranno agli altri. Ad esempio, se si modificano le dimensioni di un elemento sul breakpoint mobile, la modifica verrà applicata solo ai breakpoint mobili e di visualizzazione orizzontale mobile, e a nessun altro.
In Flex, i breakpoint predefiniti sono:
Desktop (1025px-1399px)
Wide desktop (1400px e superiore)
Tablet (768px-1024px)
Mobile (767px e inferiore)
Mobile landscape (468px-767px)
Ti consigliamo di controllare le modifiche dei breakpoint mobili su un dispositivo mobile, invece di ridimensionare uno schermo desktop .
È possibile passare da un breakpoint all'altro nella parte superiore della pagina facendo clic sulle diverse viste.
Modifiche strutturali
Le modifiche strutturali apportate a un breakpoint influenzano tutti gli altri. Quando ci si trova in un breakpoint diverso rispetto a quello principale (desktop) e si effettua una modifica strutturale, comparirà un messaggio che informa che tale modifica interesserà tutti i breakpoint. Le modifiche strutturali includono modifiche al contenuto o al layout, ad esempio l'aggiunta o l'eliminazione di sezioni, colonne, colonne interne, widget o griglie avanzate.
Nascondere un elemento su un breakpoint
Puoi nascondere determinati elementi in specifici breakpoint dal riquadro dei layer o dal menu mobile dell'elemento. Ad esempio, puoi nascondere un'immagine sui dispositivi mobili senza che ciò influisca sugli altri breakpoint.
Se nascondi un elemento che contiene altri elementi nidificati, anche tutti gli elementi nidificati verranno nascosti per quel breakpoint. Ad esempio, se nascondi una colonna flex, verranno nascosti anche i widget al suo interno.
Per nascondere un elemento in un dato breakpoint:
Passa al breakpoint nel quale intendi nascondere l'elemento cliccando la vista nella barra di navigazione superiore.
Fai clic sull'elemento da nascondere.
Fai clic sull'icona dei tre punti orizzontali (
) nel menu mobile e seleziona Nascondi su questo breakpoint. Oppure, nel pannello dei livelli, fai clic su Nascondi su questo breakpoint accanto all'elemento.
Sostituzioni dei breakpoint
Quando si modifica il contenuto, è possibile apportare la modifica da qualsiasi breakpoint e fare in modo che influisca su tutti gli altri. Tuttavia, ci sono alcuni casi in cui è necessario ignorare un breakpoint. Ad esempio, sul breakpoint principale un'immagine potrebbe trovarsi sulla destra di un paragrafo, ma sui dispositivi mobili è necessario che l'immagine sia in alto e il paragrafo in basso.
Di seguito sono riportate le modifiche che è possibile apportare a un elemento per sostituire il breakpoint principale:
Allineamento
Posizione
Dimensione
Spaziatura
Una volta sostituito un breakpoint, non è possibile invertire la modifica cambiando lo stile nel breakpoint principale dello stesso oggetto.