{"id":124691,"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-03T16:44:29","modified_gmt":"2025-02-03T15:44:29","slug":"liquid-layouts-and-breakpoints","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/layouts-liquidos-breakpoints","title":{"rendered":"Disposiciones l\u00edquidas y puntos de ruptura"},"content":{"rendered":"<p>Puedes cambiar la posici\u00f3n o incluso cambiar el contenido de una pantalla de forma din\u00e1mica, cuando la pantalla se ensancha o se estrecha en el navegador. Esto se llama definir puntos de ruptura. Un punto de ruptura es el \u00abpunto\u00bb en el que el contenido y el dise\u00f1o de un sitio web se adaptar\u00e1n de una determinada manera para ofrecer la mejor experiencia posible al usuario. Adem\u00e1s, puedes crear un dise\u00f1o l\u00edquido para cambiar el tama\u00f1o de los objetos de una p\u00e1gina en funci\u00f3n de los cambios realizados en el tama\u00f1o o la orientaci\u00f3n de la p\u00e1gina.<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=\"Prototipos responsivos\">Prototipos responsivos<\/source><\/video><\/p>\n<h3>Eventos de dise\u00f1o l\u00edquido<\/h3>\n<p>Puedes utilizar eventos para definir puntos de ruptura y crear disposiciones l\u00edquidas. Estos eventos pueden enlazar con otra pantalla con una disposici\u00f3n diferente, mostrar un Panel Din\u00e1mico que tenga una disposici\u00f3n diferente o mover elementos en la pantalla. Cuando crees el evento de punto de ruptura, empieza con el activador \u00abAl cambiar el tama\u00f1o de la ventana\u00bb. El disparador \u00abAl cambiar el tama\u00f1o de la ventana\u00bb detectar\u00e1 cu\u00e1ndo se ha cambiado el tama\u00f1o de la ventana de simulaci\u00f3n. Luego, para la acci\u00f3n resultante, elige una acci\u00f3n \u00abNavegar\u00bb, \u00abMover\u00bb o \u00abEstablecer panel activo\u00bb. <\/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>La acci\u00f3n \u00abEnlazar con\u00bb enlazar\u00e1 con otra pantalla con un dise\u00f1o diferente. <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=\"Disposici\u00f3n del l\u00edquido\">Disposici\u00f3n l\u00edquida<\/source><\/video><br \/>\nLa acci\u00f3n \u00abMover\u00bb desplazar\u00e1 un elemento a otra zona de la pantalla para hacerlo m\u00e1s visible.<\/p>\n<p><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=\"Mover evento\" width=\"755\" height=\"589\"><br \/>\nEl resultado de la acci\u00f3n \u00abMover\u00bb tendr\u00e1 este aspecto: <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=\"Movimiento de disposici\u00f3n de l\u00edquidos\">Mover dise\u00f1o l\u00edquido<\/source><\/video><br \/>\nLa acci\u00f3n \u00abEstablecer Panel Activo\u00bb mostrar\u00e1 otro Panel Din\u00e1mico con un dise\u00f1o diferente.<\/p>\n<p><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=\"Activar evento de panel activo\" width=\"755\" height=\"549\"><br \/>\nEl resultado de la acci\u00f3n \u00abEstablecer panel activo\u00bb tendr\u00e1 este aspecto:<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=\"Panel de disposici\u00f3n de l\u00edquidos\">Panel de disposici\u00f3n de l\u00edquidos<\/source><\/video><\/p>\n<h3>Condiciones de disposici\u00f3n del l\u00edquido<\/h3>\n<p>Tras crear el evento, tendr\u00e1s que definir una condici\u00f3n para que el evento s\u00f3lo se active cuando la ventana de simulaci\u00f3n tenga un tama\u00f1o determinado. Esta condici\u00f3n detectar\u00e1 la anchura de la ventana de simulaci\u00f3n, y la comparar\u00e1 con un tama\u00f1o de ventana que t\u00fa definas. Ese tama\u00f1o de ventana definido es el punto de ruptura, que es cuando el contenido de la maqueta empieza a cortarse, o cuando los elementos empiezan a cruzarse al redimensionar la ventana. <video style=\"\" class=\"lazyload\" preload=\"\" muted=\"\" loop=\"\" data-autoplay=\"\" data-poster=\"\" playsinline=\"\"><source src=\"\" type=\"\"><img decoding=\"async\" src=\"\" alt=\"\">Condiciones l\u00edquidas<\/source><\/video><br \/>\nHe aqu\u00ed c\u00f3mo crear esa condici\u00f3n:  <\/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>Mira en la paleta Eventos, donde acabas de crear un evento. Haz clic en el texto \u00abA\u00f1adir condici\u00f3n\u00bb y aparecer\u00e1 el constructor de Expresiones Condicionales. <\/li>\n<li>Haz clic en la pesta\u00f1a \u00abConstantes\u00bb. Arrastra el icono \u00abAnchura de ventana\u00bb al espacio abierto en la expresi\u00f3n. La constante \u00abAnchura de ventana\u00bb detectar\u00e1 autom\u00e1ticamente la anchura de la ventana de simulaci\u00f3n.  <\/li>\n<li>Haz clic en la pesta\u00f1a \u00abFunciones\u00bb y mira en la secci\u00f3n \u00abComparadores\u00bb. Aqu\u00ed encontrar\u00e1s los comparadores que puedes utilizar para definir la condici\u00f3n. Probablemente querr\u00e1s elegir un comparador &#8216;Mayor que&#8217; (&#8216;&gt;&#8217;) o &#8216;Menor que&#8217; (&#8216;&lt;&#8216;). Los comparadores &#8216;Mayor que o igual a&#8217; (&#8216;\u2265&#8217;) y &#8216;Menor que o igual a&#8217; (&#8216;\u2264&#8217;) tambi\u00e9n funcionan bien aqu\u00ed.   <\/li>\n<li>Tras arrastrar uno de esos comparadores junto al icono \u00abAncho de ventana\u00bb, aparecer\u00e1 un espacio abierto.<\/li>\n<li>Haz doble clic en ese espacio abierto y escribe un valor. \u00c9ste ser\u00e1 el ancho de la ventana de simulaci\u00f3n que debe cumplirse para activar el evento. Las anchuras habituales son 1000 (web), 900 (tablet) y 600 (m\u00f3vil). Dependiendo de tu dise\u00f1o, puede que quieras ajustar estos n\u00fameros para que sean mayores o menores.   <\/li>\n<li><strong>Nota<\/strong>: Para un dise\u00f1o de tableta, tendr\u00e1s que a\u00f1adir otra parte a la condici\u00f3n utilizando la funci\u00f3n l\u00f3gica \u00abY\u00bb (&#8216;&amp;&#8217;).<\/li>\n<li>Haz clic en Aceptar para terminar de crear la condici\u00f3n.<\/li>\n<\/ol>\n<p>Una vez que hayas creado la condici\u00f3n para este evento, tendr\u00e1s que crear otro evento que vuelva al dise\u00f1o por defecto cuando deje de cumplirse la condici\u00f3n de anchura de ventana. Ser\u00e1 otro evento \u00abAl cambiar el tama\u00f1o de la ventana\u00bb + \u00abVincular a\u00bb\/\u00bbEstablecer panel activo\u00bb\/\u00bbMover\u00bb. <\/p>\n<div style=\"padding-left: 30px;\"><strong>Nota:<\/strong> La configuraci\u00f3n de la simulaci\u00f3n debe ajustarse para que se expanda a la anchura del navegador. Puedes especificarlo en los ajustes de simulaci\u00f3n o en la ventana de simulaci\u00f3n. <\/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=\"Ajuste de simulaci\u00f3n\" width=\"755\" height=\"491\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Puedes cambiar la posici\u00f3n o incluso cambiar el contenido de una pantalla de forma din\u00e1mica, cuando la pantalla se ensancha o se estrecha en el navegador&#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":[],"class_list":["post-124691","post","type-post","status-publish","format-standard","hentry","category-formacion","category-prototipado-responsivo"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124691"}],"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=124691"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124691\/revisions"}],"predecessor-version":[{"id":126153,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124691\/revisions\/126153"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}