Informationen dazu, wie Sie Ihre Website responsive machen, finden Sie unter Responsives Tablet.
Ein Haltepunkt ist die Größe, an der sich das Design an eine bestimmte Bildschirmbreite anpasst. Durch Haltepunkte bleiben Designs beim Vergrößern und Verkleinern responsiv. In Flex gibt es die folgenden Standard-Haltepunkte:
Desktop (1025–1399 Pixel)
Breiter Desktop (1400 Pixel und höher)
Tablet (768–1024 Pixel)
Mobilgerät (767 Pixel und weniger)
Mobiles Querformat (468–767 Pixel)
Die besten Ergebnisse erzielen Sie, wenn Sie Änderungen für mobile Haltepunkte auf einem mobilen Gerät und nicht durch Größenänderung eines Desktop-Bildschirms überprüfen.
Sie können oben auf der Seite zwischen den Haltepunkten wechseln, indem Sie die unterschiedlichen Ansichten anklicken.
Änderungen, die am Haupt-Haltepunkt (Desktop) vorgenommen werden, wirken sich auf alle Haltepunkte aus. Wenn Sie jedoch für bestimmte Haltepunkte (z. B. mobiles Querformat) Änderungen an der Position und Größe von Elementen (nichtstrukturelle Änderungen) vornehmen müssen, wirken sich diese Änderungen nicht auf die anderen Modi aus. Änderungen am Haltepunkt „Mobil“ (Hochformat) wirken sich auf den Haltepunkt „Mobiles Querformat“ aus.
Strukturelle Änderungen
Strukturelle Änderungen an einem Haltepunkt wirken sich auf alle anderen Haltepunkte aus. Wenn Sie sich an einem anderen Haltepunkt als dem Haupt-Haltepunkt (Desktop) befinden und eine strukturelle Änderung vornehmen, wird eine Warnmeldung angezeigt, die Sie darüber informiert, dass die Änderung alle Haltepunkte betrifft. Im Folgenden werden Beispiele für strukturelle Änderungen genannt:
Löschen oder Hinzufügen von Inhalten
Ziehen eines Widgets innerhalb einer Flexbox
Entfernen eines Widgets aus einer Flexbox und Platzieren im Raster
Löschen eines Widgets innerhalb eines Containers
und mehr
An einem Haltepunkt ausblenden
Vielleicht möchten Sie bestimmte Elemente an bestimmten Haltepunkten ausblenden (z. B. ein Bild auf mobilen Geräten).
Um ein Element an einem bestimmten Haltepunkt auszublenden:
- Wechseln Sie zu dem Haltepunkt, an dem Sie das Element ausblenden möchten, indem Sie in der oberen Navigation auf die Ansicht klicken.
- Klicken Sie auf das Element, das Sie ausblenden möchten.
- Klicken Sie im Bedienfeld „Ebenen“ neben dem Element auf die Schaltfläche An diesem Haltepunkt ausblenden.
Wenn Sie ein Element ausblenden, das andere verschachtelte Elemente enthält (z. B. das Ausblenden eines Containers mit zwei Schaltflächen-Widgets im Container), werden alle verschachtelten Elemente an diesem Haltepunkt ebenfalls ausgeblendet.
Um ein Element wieder einzublenden, klicken Sie im Ebenen-Bedienfeld neben dem ausgeblendeten Element auf An diesem Haltepunkt anzeigen.
Das Ausblenden von Elementen auf dem Haupt-Haltepunkt hat keine Auswirkungen auf die anderen Haltepunkte. So ist beispielsweise eine am Haupt-Haltepunkt ausgeblendete Schaltfläche am Tablet-Haltepunkt (und allen anderen Haltepunkten) weiterhin sichtbar.