{"id":129109,"date":"2019-01-02T17:54:01","date_gmt":"2019-01-02T16:54:01","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/learn-how-to-create-responsive-prototypes\/"},"modified":"2025-02-13T17:11:33","modified_gmt":"2025-02-13T16:11:33","slug":"learn-how-to-create-responsive-prototypes","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/erlernen-wie-man-responsive-prototypen-erstellt","title":{"rendered":"Wie man responsive Prototypen erstellt"},"content":{"rendered":"<p>Prototypen, die mit responsivem Design erstellt wurden, werden auf jeder Bildschirmgr\u00f6\u00dfe gut dargestellt, einschlie\u00dflich Handy, Tablet und Desktop.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/responsive-prototypes.png\"><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><br \/>\nHier erfahren Sie, was Sie wissen m\u00fcssen, um responsive Prototypen in Justinmind zu erstellen:<\/p>\n<h3>Angepinnte Elemente<\/h3>\n<p>Durch das Anheften k\u00f6nnen Sie ein Element an einer bestimmten Position auf dem Bildschirm platzieren. Dadurch wird sichergestellt, dass sich Ihr Element nicht verschiebt, auch wenn Sie auf der Seite nach unten scrollen. Dies ist n\u00fctzlich, um Kopf- und Fu\u00dfzeilen zu fixieren, Inhalte zu zentrieren und vieles mehr.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/pinned-element.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" pinned-element.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/pinned-element.png\" alt=\"Angepinnte Elemente\">Angepinnte<\/video>Elemente<br \/>\n<a href=\"https:\/\/www.justinmind.com\/de\/hilfe\/pinned-elements\">Lernen Sie, wie Sie angeheftete Elemente verwenden k\u00f6nnen.<\/a><\/p>\n<h3>Prozentuale H\u00f6he und Breite<\/h3>\n<p>Elemente k\u00f6nnen ihre Gr\u00f6\u00dfe automatisch an die Abmessungen des Browsers anpassen, indem sie die H\u00f6he und Breite prozentual bestimmen. Auf diese Weise reagiert das Element entsprechend, wenn Sie die Gr\u00f6\u00dfe des Browsers \u00e4ndern.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/percentage-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" percentage-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/percentage-example.png\" alt=\"Prozentualer Anteil\" example=\"\">Prozentuales Beispiel<\/video><br \/>\n<a href=\"https:\/\/www.justinmind.com\/de\/hilfe\/prozentuale-hoehe-und-breite\">Lernen Sie, wie Sie prozentuale Breite und H\u00f6he verwenden k\u00f6nnen.<\/a><\/p>\n<h3>Fl\u00fcssige Layouts und Haltepunkt-Ereignisse<\/h3>\n<p>Die Verwendung von Ereignissen zur Erstellung von Haltepunkten hilft bei der Anpassung von Elementen an den Bildschirm, indem erkannt wird, wenn sich die Bildschirmgr\u00f6\u00dfe \u00e4ndert.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/liquid-layout-panel.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" liquid-layout-panel.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/liquid-layout-panel.png\" alt=\"Fl\u00fcssiges Layout\">Fl\u00fcssiges Layout<\/video><br \/>\n<a href=\"https:\/\/www.justinmind.com\/de\/support\/liquid-layouts-and-breakpoints\">Lernen Sie, wie man Fl\u00fcssigkeitslayouts und Haltepunkte verwendet.<\/a><\/p>\n<p>Nachdem Sie diese Prinzipien gelernt haben, k\u00f6nnen Sie mit Justinmind viele responsive Prototypen erstellen. Hier finden Sie weitere Beispiele, wie Sie dies erreichen k\u00f6nnen: <\/p>\n<ul>\n<li><a href=\"https:\/\/www.justinmind.com\/de\/support\/create-a-basic-responsive-prototype\">Erstellen Sie einen einfachen responsiven Prototyp<\/a><\/li>\n<li><a href=\"https:\/\/www.justinmind.com\/de\/support\/create-a-conditional-menu\">Ein bedingtes Men\u00fc erstellen<\/a><\/li>\n<li><a href=\"https:\/\/www.justinmind.com\/de\/support\/create-a-fluid-table\">Erstellen Sie eine Fluidtabelle<\/a><\/li>\n<li><a href=\"https:\/\/www.justinmind.com\/de\/hilfe\/erstellen-ein-fluid-grid\">Erstellen Sie ein flie\u00dfendes Gitter<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Prototypen, die mit responsivem Design erstellt wurden, werden auf jeder Bildschirmgr\u00f6\u00dfe gut dargestellt, einschlie\u00dflich Handy, Tablet und Desktop.Reaktionsf\u00e4hige Prototypen Hier erfahren Sie, was Sie wissen m\u00fcssen,&#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":[8565,8563,8564,8566,8567,8561,8562],"class_list":["post-129109","post","type-post","status-publish","format-standard","hentry","category-ausbildung","category-reaktionsfaehiges-prototyping","tag-bedingtes-menue","tag-fluessig","tag-fluessiges-layout","tag-fluessigkeit","tag-gitter","tag-reaktionsfaehiges-design","tag-reaktionsschnell"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129109"}],"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=129109"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129109\/revisions"}],"predecessor-version":[{"id":129175,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129109\/revisions\/129175"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}