{"id":124690,"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-03T20:53:16","modified_gmt":"2025-02-03T19:53:16","slug":"learn-how-to-create-responsive-prototypes","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/aprender-a-crear-prototipos-responsivos","title":{"rendered":"C\u00f3mo crear prototipos responsivos"},"content":{"rendered":"<p>Los prototipos creados con dise\u00f1o responsivo se mostrar\u00e1n bien en cualquier tama\u00f1o de pantalla, incluidos m\u00f3viles, tabletas y ordenadores de sobremesa.<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=\"Prototipos responsivos\">Prototipos adaptativos<\/source><\/video><br \/>\nEsto es lo que necesitas saber para crear prototipos adaptativos en Justinmind:<\/p>\n<h3>Elementos fijados<\/h3>\n<p>Puedes colocar un elemento en una posici\u00f3n definida de la pantalla mediante Anclado, esto asegurar\u00e1 que tu elemento no se mueva aunque te desplaces por la p\u00e1gina. Esto es \u00fatil para crear cabeceras y pies de p\u00e1gina fijos, contenido centrado, etc.<video class=\"lazyload\" style=\"\" preload=\"\" loop=\"\" muted=\"\" width=\"\" height=\"\" data-autoplay=\"\" data-poster=\"\" playsinline=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" pinned-element.mp4=\"\" type=\"\" https:=\"\"><img decoding=\"async\" src=\"\" alt=\"\">Elementos anclados<\/video><br \/>\n<a href=\"https:\/\/www.justinmind.com\/es\/soporte\/elementos-fijados\">Aprende a utilizar los elementos fijados.<\/a><\/p>\n<h3>Porcentaje de altura y anchura<\/h3>\n<p>Los elementos pueden redimensionarse autom\u00e1ticamente a las dimensiones del navegador utilizando una altura y anchura basadas en porcentajes. De este modo, cuando cambies el tama\u00f1o del navegador, el elemento responder\u00e1 en consecuencia.<video class=\"lazyload\" style=\"\" preload=\"\" loop=\"\" muted=\"\" width=\"\" height=\"\" data-autoplay=\"\" data-poster=\"\" playsinline=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" percentage-example.mp4=\"\" type=\"\" https:=\"\"><img decoding=\"async\" src=\"\" alt=\"\" example=\"\">Ejemplo de porcentaje<\/video><br \/>\n<a href=\"https:\/\/www.justinmind.com\/es\/soporte\/porcentaje-alto-y-ancho\">Aprende a utilizar los porcentajes de anchura y altura.<\/a><\/p>\n<h3>Disposiciones l\u00edquidas y eventos de punto de ruptura<\/h3>\n<p>Utilizar eventos para crear puntos de ruptura ayudar\u00e1 a ajustar los elementos a la pantalla detectando cu\u00e1ndo cambia el tama\u00f1o de \u00e9sta.<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=\"Disposici\u00f3n del l\u00edquido\">Disposici\u00f3n del l\u00edquido<\/video><br \/>\n<a href=\"https:\/\/www.justinmind.com\/es\/soporte\/layouts-liquidos-breakpoints\">Aprende a utilizar disposiciones l\u00edquidas y puntos de ruptura.<\/a><\/p>\n<p>Despu\u00e9s de aprender estos principios, podr\u00e1s crear muchos prototipos responsivos con Justinmind. Aqu\u00ed tienes m\u00e1s ejemplos de c\u00f3mo conseguirlo: <\/p>\n<ul>\n<li><a href=\"https:\/\/www.justinmind.com\/es\/soporte\/crear-un-prototipo-responsivo-basico\">Crear un prototipo responsivo b\u00e1sico<\/a><\/li>\n<li><a href=\"https:\/\/www.justinmind.com\/es\/soporte\/crear-un-menu-condicional\">Crear un men\u00fa condicional<\/a><\/li>\n<li><a href=\"https:\/\/www.justinmind.com\/es\/soporte\/crear-una-tabla-fluida\">Crear una tabla de fluidos<\/a><\/li>\n<li><a href=\"https:\/\/www.justinmind.com\/es\/soporte\/crear-una-rejilla-fluida\">Crea una cuadr\u00edcula fluida<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Los prototipos creados con dise\u00f1o responsivo se mostrar\u00e1n bien en cualquier tama\u00f1o de pantalla, incluidos m\u00f3viles, tabletas y ordenadores de sobremesa.Prototipos adaptativos Esto es lo que&#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":[8418,8440],"tags":[8448,8442,8445,8447,8444,8446,8443],"class_list":["post-124690","post","type-post","status-publish","format-standard","hentry","category-formacion","category-prototipado-responsivo","tag-cuadricula","tag-diseno-responsivo","tag-disposicion-del-liquido","tag-fluido","tag-liquido","tag-menu-condicional","tag-receptivo"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124690"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124690"}],"version-history":[{"count":3,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124690\/revisions"}],"predecessor-version":[{"id":126265,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124690\/revisions\/126265"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}