Panoramica dei punti di interruzione
I breakpoint sono intervalli di pixel che corrispondono alla larghezza di diversi dispositivi, come computer desktop, tablet e dispositivi mobili. Quando la larghezza di un dispositivo rientra in un intervallo di pixel predefinito da un breakpoint, il layout del sito viene adattato in modo che il contenuto e il design siano ottimizzati per le dimensioni e l'orientamento di quel dispositivo. Ad esempio, se visualizzo un sito su un computer desktop, posso vedere il menu completo del sito, ma quando visualizzo lo stesso sito sul mio dispositivo mobile, vedo invece un menu a scomparsa (hamburger menu).
Nota:
Questo articolo è rilevante solo per gli utenti che hanno iniziato a utilizzare Flex dopo il 18 luglio 2022. Se utilizzi la versione 1.0 di Flex, consulta la pagina Punti di interruzione di Flex (1.0).
Punti di flessione
Il breakpoint principale per Flex è il desktop. Se apporti modifiche al design o al contenuto del breakpoint desktop, le modifiche vengono applicate automaticamente agli altri breakpoint per desktop widescreen, tablet e dispositivi mobili. Se modifichi il contenuto, ad esempio aggiungendo un widget, sostituendo un'immagine o modificando del testo, la modifica viene applicata automaticamente a tutti gli altri breakpoint, indipendentemente dal breakpoint su cui è stata apportata la modifica.
Tuttavia, se si modificano la posizione o le dimensioni di un elemento in corrispondenza di specifici breakpoint, le modifiche non verranno applicate agli altri breakpoint. Ad esempio, se si modificano le dimensioni di un elemento in corrispondenza del breakpoint "mobile", la modifica verrà applicata solo ai breakpoint "mobile" e "mobile landscape" e a nessun altro breakpoint.
In Flex, i breakpoint predefiniti sono:
Desktop (1025px-1399px)
Desktop ampio (1400 pixel e oltre)
Tablet (768px-1024px)
Dispositivi mobili (767 pixel e inferiori)
Orientamento orizzontale su dispositivi mobili (468px-767px)
Nota:
Si consiglia di verificare le modifiche ai breakpoint su un dispositivo mobile, anziché ridimensionare lo schermo di un computer desktop.
È possibile passare da un breakpoint all'altro nella parte superiore della pagina facendo clic sulle diverse visualizzazioni.
Cambiamenti strutturali
Le modifiche strutturali apportate a un punto di interruzione influiscono su tutti gli altri punti di interruzione. Quando ci si trova su un punto di interruzione diverso da quello principale (desktop) e si apporta una modifica strutturale, viene visualizzato un messaggio di avviso per informare l'utente che la modifica influisce su tutti i punti di interruzione. Le modifiche strutturali includono modifiche al contenuto o al layout, come l'aggiunta o l'eliminazione di sezioni, colonne, flexbox, widget o griglie avanzate.
Nascondi al punto di interruzione
È possibile nascondere determinati elementi in corrispondenza di specifici breakpoint dal pannello Livelli o dal menu mobile dell'elemento. Ad esempio, è possibile nascondere un'immagine sui dispositivi mobili senza che ciò influisca sugli altri breakpoint.
Nota:
Se nascondi un elemento che contiene altri elementi annidati al suo interno, anche tutti gli elementi annidati verranno nascosti a partire da quel breakpoint. Ad esempio, se nascondi una colonna flex, verranno nascosti anche i widget al suo interno.
Per nascondere un elemento in corrispondenza di un breakpoint specifico:
Passa al breakpoint in cui desideri nascondere l'elemento facendo clic sulla vista nella barra di navigazione in alto.
Fai clic sull'elemento che desideri nascondere.
Fai clic sull'icona con i tre puntini 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.
Sovrascrittura dei punti di interruzione
Quando si modifica il contenuto, è possibile apportare la modifica da qualsiasi breakpoint e questa avrà effetto su tutti i breakpoint. Tuttavia, in alcuni casi è necessario ignorare un breakpoint. Ad esempio, nel breakpoint principale un'immagine si trova a destra di un paragrafo, ma sui dispositivi mobili è necessario che l'immagine sia in alto e il paragrafo in basso.
Di seguito sono elencate le modifiche che è possibile apportare a un elemento e che sovrascrivono il breakpoint principale:
Allineamento
Posizione
Misura
Spaziatura
Nota:
Una volta che si sovrascrive un punto di interruzione, non è possibile annullare la modifica cambiando lo stile nel punto di interruzione principale sullo stesso oggetto.
