{"id":128993,"date":"2019-01-02T18:00:00","date_gmt":"2019-01-02T17:00:00","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/liquid-layouts-and-breakpoints\/"},"modified":"2025-02-13T18:48:04","modified_gmt":"2025-02-13T17:48:04","slug":"liquid-layouts-and-breakpoints","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/flussige-layouts-haltepunkte","title":{"rendered":"Fl\u00fcssige Layouts und Haltepunkte"},"content":{"rendered":"<p>Sie k\u00f6nnen die Position oder sogar den Inhalt eines Bildschirms dynamisch \u00e4ndern, wenn sich der Bildschirm im Browser verbreitert oder verengt. Dies wird als Definition von Haltepunkten bezeichnet. Ein Haltepunkt ist der &#8222;Punkt&#8220;, an dem sich der Inhalt und das Design einer Website auf eine bestimmte Weise anpassen, um das bestm\u00f6gliche Benutzererlebnis zu bieten. Dar\u00fcber hinaus k\u00f6nnen Sie ein fl\u00fcssiges Layout erstellen, um die Gr\u00f6\u00dfe der Objekte auf einer Seite entsprechend den \u00c4nderungen der Seitengr\u00f6\u00dfe oder -ausrichtung anzupassen.<br \/>\n<video style=\"max-width:820px; width:100%; padding:20px 0px 0px\" class=\"lazyload\" preload=\"auto\" muted=\"\" loop=\"\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/responsive-prototypes.png\" playsinline=\"\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/responsive-prototypes.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/responsive-prototypes.png\" alt=\"Reaktionsf\u00e4hige Prototypen\">Reaktionsf\u00e4hige Prototypen<\/source><\/video><\/p>\n<h3>Liquid Layout Ereignisse<\/h3>\n<p>Sie k\u00f6nnen Ereignisse verwenden, um Haltepunkte zu definieren und fl\u00fcssige Layouts zu erstellen. Diese Ereignisse k\u00f6nnen eine Verbindung zu einem anderen Bildschirm mit einem anderen Layout herstellen, ein dynamisches Panel mit einem anderen Layout anzeigen oder Elemente auf dem Bildschirm verschieben. <\/p>\n<p>Wenn Sie das Haltepunkt-Ereignis erstellen, beginnen Sie mit dem Ausl\u00f6ser &#8222;On Window Resize&#8220;. Der Ausl\u00f6ser &#8222;On Window Resize&#8220; erkennt, wenn die Gr\u00f6\u00dfe des Simulationsfensters ge\u00e4ndert wurde. W\u00e4hlen Sie dann f\u00fcr die resultierende Aktion eine der Aktionen &#8222;Navigieren&#8220;, &#8222;Verschieben&#8220; oder &#8222;Aktives Panel festlegen&#8220;.  <\/p>\n<div class=\"embed-container\" style=\"padding-bottom:62%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745739307\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Die Aktion &#8222;Link zu&#8220; verweist auf einen anderen Bildschirm mit einem anderen Layout.<br \/>\n<video style=\"max-width:820px; width:100%; padding:20px 0px\" class=\"lazyload\" preload=\"auto\" muted=\"\" loop=\"\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/liquid-layout.png\" playsinline=\"\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/liquid-layout.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/liquid-layout.png\" alt=\"Fl\u00fcssiges Layout\">Fl\u00fcssiges Layout<\/source><\/video><br \/>\nMit der Aktion &#8222;Verschieben&#8220; k\u00f6nnen Sie ein Element in einen anderen Bereich des Bildschirms verschieben, um es besser sichtbar zu machen.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"wp-image-15138 size-full alignnone\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/MoveEvent.png\" alt=\"Ereignis verschieben\" width=\"755\" height=\"589\"><br \/>\nDas Ergebnis der Aktion &#8222;Verschieben&#8220; sieht dann so aus:<br \/>\n<video style=\"max-width:820px; width:100%; padding:20px 0px\" class=\"lazyload\" preload=\"auto\" muted=\"\" loop=\"\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/liquid-layout-move.png\" playsinline=\"\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/liquid-layout-move.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/liquid-layout-move.png\" alt=\"Liquid Layout verschieben\">Fl\u00fcssiges Layout verschieben<\/source><\/video><br \/>\nDie Aktion &#8222;Aktives Panel einstellen&#8220; zeigt ein anderes dynamisches Panel an, das ein anderes Layout hat.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15141\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/SetActivePanelEvent.png\" alt=\"Aktives Panel-Ereignis einstellen\" width=\"755\" height=\"549\"><br \/>\nDas Ergebnis der Aktion &#8222;Aktives Panel festlegen&#8220; sieht wie folgt aus:<br \/>\n<video style=\"max-width:820px; width:100%; padding:20px 0px\" class=\"lazyload\" preload=\"auto\" muted=\"\" loop=\"\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/liquid-layout-panel.png\" playsinline=\"\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/liquid-layout-panel.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/liquid-layout-panel.png\" alt=\"Liquid Layout-Panel\">Liquid Layout-Panel<\/source><\/video><\/p>\n<h3>Bedingungen f\u00fcr die Fl\u00fcssigkeitsanordnung<\/h3>\n<p>Nachdem Sie das Ereignis erstellt haben, m\u00fcssen Sie eine Bedingung definieren, damit das Ereignis nur ausgel\u00f6st wird, wenn das Simulationsfenster eine bestimmte Gr\u00f6\u00dfe hat. Diese Bedingung erkennt die Breite des Simulationsfensters und vergleicht diese mit einer von Ihnen definierten Fenstergr\u00f6\u00dfe. Diese definierte Fenstergr\u00f6\u00dfe ist der Haltepunkt, d.h. der Punkt, an dem der Inhalt des Layouts abgeschnitten wird oder an dem sich die Elemente beim \u00c4ndern der Fenstergr\u00f6\u00dfe \u00fcberschneiden.<br \/>\n<video style=\"max-width:820px; width:100%; padding:20px 0px\" class=\"lazyload\" preload=\"auto\" muted=\"\" loop=\"\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/liquid-conditions.png\" playsinline=\"\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/liquid-conditions.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/liquid-conditions.png\" alt=\"Fl\u00fcssige Bedingungen\">Fl\u00fcssige Bedingungen<\/source><\/video><br \/>\nHier sehen Sie, wie Sie diese Bedingung erstellen:<\/p>\n<div class=\"embed-container\" style=\"padding-bottom:62%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745750359\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ol>\n<li>Schauen Sie in der Palette Ereignisse nach, wo Sie gerade ein Ereignis erstellt haben. Klicken Sie auf den Text &#8222;Bedingung hinzuf\u00fcgen&#8220;. Daraufhin wird der Builder f\u00fcr bedingte Ausdr\u00fccke angezeigt. <\/li>\n<li>Klicken Sie auf die Registerkarte &#8222;Konstanten&#8220;. Ziehen Sie das Symbol &#8222;Fensterbreite&#8220; in den offenen Bereich des Ausdrucks. Die Konstante &#8218;Fensterbreite&#8216; wird automatisch die Breite des Simulationsfensters ermitteln.  <\/li>\n<li>Klicken Sie auf die Registerkarte &#8222;Funktionen&#8220; und sehen Sie sich den Abschnitt &#8222;Komparatoren&#8220; an. Hier finden Sie die Vergleicher, die Sie zur Definition der Bedingung verwenden k\u00f6nnen. Sie werden wahrscheinlich einen &#8218;Gr\u00f6\u00dfer als&#8216; (&#8218;&gt;&#8216;) oder &#8218;Kleiner als&#8216; (&#8218;&lt;&#8218;) Komparator w\u00e4hlen wollen. Auch &#8218;Gr\u00f6\u00dfer als oder gleich&#8216; (&#8218;\u2265&#8216;) und &#8218;Kleiner als oder gleich&#8216; (&#8218;\u2264&#8216;) funktionieren hier gut.   <\/li>\n<li>Nachdem Sie einen dieser Komparatoren neben das Symbol &#8218;Fensterbreite&#8216; gezogen haben, wird ein offener Bereich angezeigt.<\/li>\n<li>Doppelklicken Sie in dieses freie Feld und geben Sie einen Wert ein. Dies ist die Breite des Simulationsfensters, die erf\u00fcllt sein muss, damit das Ereignis ausgel\u00f6st wird. \u00dcbliche Breiten sind 1000 (Web), 900 (Tablet) und 600 (Mobile). Je nach Ihrem Layout k\u00f6nnen Sie diese Zahlen gr\u00f6\u00dfer oder kleiner einstellen.   <\/li>\n<li><strong>Hinweis:<\/strong> Beachten Sie: F\u00fcr ein Tablet-Layout m\u00fcssen Sie der Bedingung einen weiteren Teil hinzuf\u00fcgen, indem Sie die Logikfunktion &#8222;Und&#8220; (&#8218;&amp;&#8216;) verwenden.<\/li>\n<li>Klicken Sie auf OK, um die Erstellung der Bedingung zu beenden.<\/li>\n<\/ol>\n<p>Sobald Sie die Bedingung f\u00fcr dieses Ereignis erstellt haben, m\u00fcssen Sie ein weiteres Ereignis erstellen, das zum Standardlayout zur\u00fcckkehrt, wenn die Bedingung f\u00fcr die Fensterbreite nicht mehr erf\u00fcllt ist. Dies wird ein weiteres Ereignis &#8222;On Window Resize&#8220; + &#8222;Link To&#8220;\/&#8220;Set Active Panel&#8220;\/&#8220;Move&#8220; sein. <\/p>\n<div style=\"padding-left: 30px;\"><strong>Hinweis:<\/strong> Die Simulationseinstellungen m\u00fcssen so eingestellt sein, dass sie sich auf die Breite des Browsers ausdehnen. Sie k\u00f6nnen dies in den Simulationseinstellungen oder im Simulationsfenster festlegen. <\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15298\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/SimulationSetting.png\" alt=\"Einstellung der Simulation\" width=\"755\" height=\"491\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sie k\u00f6nnen die Position oder sogar den Inhalt eines Bildschirms dynamisch \u00e4ndern, wenn sich der Bildschirm im Browser verbreitert oder verengt. Dies wird als Definition von&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8554,8555],"tags":[],"class_list":["post-128993","post","type-post","status-publish","format-standard","hentry","category-ausbildung","category-reaktionsfaehiges-prototyping"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/128993"}],"collection":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/comments?post=128993"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/128993\/revisions"}],"predecessor-version":[{"id":129225,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/128993\/revisions\/129225"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=128993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=128993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=128993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}