Per informazioni su come rendere responsivo il proprio sito, vedere Tablet responsivo.
Un "breakpoint" è la misura raggiunta la quale il design si adatta a una specifica larghezza dello schermo. I breakpoint consentono alle schermate di essere responsive, sia quando le loro dimensioni aumentano che quando diminuiscono. 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)
Per ottenere un risultato ottimale, è necessario controllare i breakpoint direttamente su un dispositivo mobile, e non ridimensionando la schermata di un desktop.
È possibile passare da un breakpoint all'altro nella parte superiore della pagina facendo clic sulle diverse viste.
La modifiche apportate al breakpoint principale (desktop) influiscono su tutti i breakpoint, ma se è necessario apportare cambiamenti alla posizione e alle dimensioni di determinati elementi (modifiche non strutturali), per alcuni breakpoint specifici (ad esempio, la modalità orizzontale sui dispositivi mobili) tali modifiche non interesseranno le altre modalità. Le modifiche apportate al breakpoint Mobile (ritratto) influiranno sul breakpoint della modalità di visualizzazione orizzontale.
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. Di seguito sono riportati alcuni esempi di modifiche strutturali:
Eliminare o aggiungere contenuti
Trascinare un widget all'interno di una flexbox
Rimuovere un widget da una flexbox e collocarlo nella griglia.
Eliminare un widget che si trova in un contenitore
Altro
Nascondere un elemento su un breakpoint
È possibile nascondere determinati elementi in breakpoint specifici (ad esempio, nascondendo un'immagine sui dispositivi mobili).
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.
- Nel pannello "Livelli", fare clic sul tasto Nascondi su questo breakpoint accanto ll'elemento.
Se si occulta un elemento che racchiude al suo interno degli elementi figlio (ad esempio quando nel contenitore si decide di occultare un contenitore con due widget pulsante), tutti gli elementi figlio verranno a loro volta nascosti al raggiungimento di quel breakpoint.
Per disattivare questa opzione, nel pannello "Livelli", fare clic su Mostra su questo breakpoint accanto all'elemento che si desidera mostrare.
Nascondere degli elementi nel breakpoint principale non influisce sugli altri breakpoint. Ad esempio, un pulsante nascosto nel breakpoint principale è ancora visibile nel breakpoint per tablet (e in tutti gli altri).