{"id":124693,"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\/fr\/aide\/dispositions-liquides-points-rupture","title":{"rendered":"Dispositions liquides et points de rupture"},"content":{"rendered":"<p>Vous pouvez modifier la position ou m\u00eame le contenu d&rsquo;un \u00e9cran de mani\u00e8re dynamique, lorsque l&rsquo;\u00e9cran s&rsquo;\u00e9largit ou se r\u00e9tr\u00e9cit dans le navigateur. C&rsquo;est ce qu&rsquo;on appelle d\u00e9finir des points de rupture. Un point de rupture est le \u00ab\u00a0point\u00a0\u00bb \u00e0 partir duquel le contenu et le design d&rsquo;un site web s&rsquo;adapteront d&rsquo;une certaine mani\u00e8re afin d&rsquo;offrir la meilleure exp\u00e9rience possible \u00e0 l&rsquo;utilisateur. En outre, vous pouvez cr\u00e9er une mise en page liquide pour redimensionner les objets d&rsquo;une page en fonction des changements apport\u00e9s \u00e0 la taille ou \u00e0 l&rsquo;orientation de la page.<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=\"Prototypes r\u00e9actifs\">Prototypes r\u00e9actifs<\/source><\/video><\/p>\n<h3>\u00c9v\u00e9nements de mise en page liquide<\/h3>\n<p>Vous pouvez utiliser des \u00e9v\u00e9nements pour d\u00e9finir des points de rupture et cr\u00e9er des mises en page liquides. Ces \u00e9v\u00e9nements permettent d&rsquo;\u00e9tablir un lien avec un autre \u00e9cran pr\u00e9sentant une disposition diff\u00e9rente, d&rsquo;afficher un panneau dynamique pr\u00e9sentant une disposition diff\u00e9rente ou de d\u00e9placer des \u00e9l\u00e9ments \u00e0 l&rsquo;\u00e9cran. Lorsque vous cr\u00e9ez l&rsquo;\u00e9v\u00e9nement de point de rupture, commencez par le d\u00e9clencheur \u00ab\u00a0On Window Resize\u00a0\u00bb. Ce dernier d\u00e9tecte le redimensionnement de la fen\u00eatre de simulation. Ensuite, pour l&rsquo;action r\u00e9sultante, choisissez une action de type \u00ab\u00a0Naviguer\u00a0\u00bb, \u00ab\u00a0D\u00e9placer\u00a0\u00bb ou \u00ab\u00a0D\u00e9finir le panneau actif\u00a0\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>L&rsquo;action \u00ab\u00a0Lien vers\u00a0\u00bb permet d&rsquo;acc\u00e9der \u00e0 un autre \u00e9cran avec une mise en page diff\u00e9rente. <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=\"Disposition des liquides\">Disposition liquide<\/source><\/video><br \/>\nL&rsquo;action \u00ab\u00a0D\u00e9placer\u00a0\u00bb permet de d\u00e9placer un \u00e9l\u00e9ment vers une autre zone de l&rsquo;\u00e9cran pour le rendre plus 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=\"D\u00e9placer l'\u00e9v\u00e9nement\" width=\"755\" height=\"589\"><br \/>\nLe r\u00e9sultat de l&rsquo;action \u00ab\u00a0D\u00e9placer\u00a0\u00bb ressemblera \u00e0 ceci : <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=\"Mouvement de mise en page liquide\">D\u00e9placement de la pr\u00e9sentation liquide<\/source><\/video><br \/>\nL&rsquo;action \u00ab\u00a0D\u00e9finir le panneau actif\u00a0\u00bb permet d&rsquo;afficher un autre panneau dynamique dont la pr\u00e9sentation est diff\u00e9rente.<\/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=\"D\u00e9finir l'\u00e9v\u00e9nement du panneau actif\" width=\"755\" height=\"549\"><br \/>\nLe r\u00e9sultat de l&rsquo;action \u00ab\u00a0D\u00e9finir le panneau actif\u00a0\u00bb se pr\u00e9sente comme suit :<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=\"Panneau de pr\u00e9sentation des liquides\">Panneau de pr\u00e9sentation des liquides<\/source><\/video><\/p>\n<h3>Conditions d&rsquo;am\u00e9nagement du liquide<\/h3>\n<p>Apr\u00e8s avoir cr\u00e9\u00e9 l&rsquo;\u00e9v\u00e9nement, vous devrez d\u00e9finir une condition pour que l&rsquo;\u00e9v\u00e9nement ne se d\u00e9clenche que lorsque la fen\u00eatre de simulation est d&rsquo;une certaine taille. Cette condition d\u00e9tectera la largeur de la fen\u00eatre de simulation et la comparera \u00e0 une taille de fen\u00eatre que vous aurez d\u00e9finie. Cette taille de fen\u00eatre d\u00e9finie constitue le point de rupture, c&rsquo;est-\u00e0-dire le moment o\u00f9 le contenu de la mise en page commence \u00e0 \u00eatre coup\u00e9 ou lorsque les \u00e9l\u00e9ments commencent \u00e0 se croiser lors du redimensionnement de la fen\u00eatre. <video style=\"\" class=\"lazyload\" preload=\"\" muted=\"\" loop=\"\" data-autoplay=\"\" data-poster=\"\" playsinline=\"\"><source src=\"\" type=\"\"><img decoding=\"async\" src=\"\" alt=\"\">Conditions de liquidit\u00e9<\/source><\/video><br \/>\nVoici comment cr\u00e9er cette condition :  <\/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>Consultez la palette \u00c9v\u00e9nements, dans laquelle vous venez de cr\u00e9er un \u00e9v\u00e9nement. Cliquez sur le texte \u00ab\u00a0Ajouter une condition\u00a0\u00bb et le constructeur d&rsquo;expressions conditionnelles appara\u00eet. <\/li>\n<li>Cliquez sur l&rsquo;onglet \u00ab\u00a0Constantes\u00a0\u00bb. Faites glisser l&rsquo;ic\u00f4ne \u00ab\u00a0Largeur de la fen\u00eatre\u00a0\u00bb dans l&rsquo;espace libre de l&rsquo;expression. La constante \u00ab\u00a0Largeur de la fen\u00eatre\u00a0\u00bb d\u00e9tectera automatiquement la largeur de la fen\u00eatre de simulation.  <\/li>\n<li>Cliquez sur l&rsquo;onglet \u00ab\u00a0Fonctions\u00a0\u00bb et consultez la section \u00ab\u00a0Comparateurs\u00a0\u00bb. Vous y trouverez les comparateurs que vous pouvez utiliser pour d\u00e9finir la condition. Vous voudrez probablement choisir un comparateur \u00ab\u00a0sup\u00e9rieur \u00e0\u00a0\u00bb (&lsquo;&gt;&rsquo;) ou \u00ab\u00a0inf\u00e9rieur \u00e0\u00a0\u00bb (&lsquo;&lt;&lsquo;). Les expressions \u00ab\u00a0Sup\u00e9rieur ou \u00e9gal \u00e0\u00a0\u00bb (\u00ab\u00a0\u2265\u00a0\u00bb) et \u00ab\u00a0Inf\u00e9rieur ou \u00e9gal \u00e0\u00a0\u00bb (\u00ab\u00a0\u2264\u00a0\u00bb) conviennent \u00e9galement.   <\/li>\n<li>Apr\u00e8s avoir fait glisser l&rsquo;un de ces comparateurs \u00e0 c\u00f4t\u00e9 de l&rsquo;ic\u00f4ne \u00ab\u00a0Largeur de la fen\u00eatre\u00a0\u00bb, un espace libre appara\u00eet.<\/li>\n<li>Double-cliquez dans cet espace ouvert et saisissez une valeur. Il s&rsquo;agit de la largeur de la fen\u00eatre de simulation qui doit \u00eatre respect\u00e9e pour d\u00e9clencher l&rsquo;\u00e9v\u00e9nement. Les largeurs courantes sont 1000 (web), 900 (tablette) et 600 (mobile). En fonction de votre mise en page, il se peut que vous souhaitiez augmenter ou r\u00e9duire ces valeurs.   <\/li>\n<li><strong>Remarque<\/strong>: pour une pr\u00e9sentation sur tablette, vous devrez ajouter une autre partie \u00e0 la condition en utilisant la fonction logique \u00ab\u00a0And\u00a0\u00bb (\u00ab\u00a0&amp;\u00a0\u00bb).<\/li>\n<li>Cliquez sur OK pour terminer la construction de la condition.<\/li>\n<\/ol>\n<p>Une fois que vous avez cr\u00e9\u00e9 la condition pour cet \u00e9v\u00e9nement, vous devez cr\u00e9er un autre \u00e9v\u00e9nement qui r\u00e9tablira la disposition par d\u00e9faut lorsque la condition de largeur de la fen\u00eatre ne sera plus remplie. Il s&rsquo;agira d&rsquo;un autre \u00e9v\u00e9nement \u00ab\u00a0On Window Resize\u00a0\u00bb + \u00ab\u00a0Link To\u00a0\u00bb\/\u00a0\u00bbSet Active Panel\u00a0\u00bb\/\u00a0\u00bbMove\u00a0\u00bb. <\/p>\n<div style=\"padding-left: 30px;\"><strong>Remarque :<\/strong> les param\u00e8tres de la simulation doivent \u00eatre r\u00e9gl\u00e9s de mani\u00e8re \u00e0 ce que la largeur du navigateur s&rsquo;\u00e9tende. Vous pouvez le sp\u00e9cifier dans les param\u00e8tres de simulation ou dans la fen\u00eatre de simulation. <\/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=\"Param\u00e8tres de simulation\" width=\"755\" height=\"491\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vous pouvez modifier la position ou m\u00eame le contenu d&rsquo;un \u00e9cran de mani\u00e8re dynamique, lorsque l&rsquo;\u00e9cran s&rsquo;\u00e9largit ou se r\u00e9tr\u00e9cit dans le navigateur. C&rsquo;est ce qu&rsquo;on&#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":[8416,8441],"tags":[],"class_list":["post-124693","post","type-post","status-publish","format-standard","hentry","category-formation","category-prototypage-reactif"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124693"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124693"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124693\/revisions"}],"predecessor-version":[{"id":126155,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124693\/revisions\/126155"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}