{"id":124692,"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:17","modified_gmt":"2025-02-03T19:53:17","slug":"learn-how-to-create-responsive-prototypes","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/apprendre-a-creer-des-prototypes-reactifs","title":{"rendered":"Comment cr\u00e9er des prototypes r\u00e9actifs"},"content":{"rendered":"<p>Les prototypes cr\u00e9\u00e9s en responsive design s&rsquo;affichent bien sur toutes les tailles d&rsquo;\u00e9cran, y compris sur mobile, tablette et ordinateur de bureau.<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=\"Prototypes r\u00e9actifs\">Prototypes r\u00e9actifs<\/source><\/video><br \/>\nVoici ce que vous devez savoir pour cr\u00e9er des prototypes responsives dans Justinmind :<\/p>\n<h3>\u00c9l\u00e9ments \u00e9pingl\u00e9s<\/h3>\n<p>Vous pouvez placer un \u00e9l\u00e9ment dans une position d\u00e9finie sur l&rsquo;\u00e9cran par le biais de l&rsquo;\u00e9pinglage, ce qui garantit que votre \u00e9l\u00e9ment ne bougera pas, m\u00eame lorsque vous faites d\u00e9filer la page. Cette fonction est utile pour cr\u00e9er des en-t\u00eates et des pieds de page collants, des contenus centr\u00e9s, 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=\"\">\u00c9l\u00e9ments \u00e9pingl\u00e9s<\/video><br \/>\n<a href=\"https:\/\/www.justinmind.com\/fr\/aide\/elements-epingles\">Apprenez \u00e0 utiliser les \u00e9l\u00e9ments \u00e9pingl\u00e9s.<\/a><\/p>\n<h3>Pourcentage de hauteur et de largeur<\/h3>\n<p>Les \u00e9l\u00e9ments sont capables de se redimensionner automatiquement en fonction des dimensions du navigateur \u00e0 l&rsquo;aide d&rsquo;une hauteur et d&rsquo;une largeur bas\u00e9es sur des pourcentages. Ainsi, lorsque vous redimensionnez le navigateur, l&rsquo;\u00e9l\u00e9ment r\u00e9agit en cons\u00e9quence.<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=\"\">Exemple de pourcentage<\/video><br \/>\n<a href=\"https:\/\/www.justinmind.com\/fr\/aide\/pourcentage-hauteur-largeur\">Apprenez \u00e0 utiliser des pourcentages de largeur et de hauteur.<\/a><\/p>\n<h3>Dispositions liquides et \u00e9v\u00e9nements de rupture<\/h3>\n<p>L&rsquo;utilisation d&rsquo;\u00e9v\u00e9nements pour cr\u00e9er des points d&rsquo;arr\u00eat permet d&rsquo;adapter les \u00e9l\u00e9ments \u00e0 l&rsquo;\u00e9cran en d\u00e9tectant les changements de taille de l&rsquo;\u00e9cran.<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=\"Disposition des liquides\">Disposition des liquides<\/video><br \/>\n<a href=\"https:\/\/www.justinmind.com\/fr\/aide\/dispositions-liquides-points-rupture\">Apprenez \u00e0 utiliser les mises en page liquides et les points de rupture.<\/a><\/p>\n<p>Apr\u00e8s avoir appris ces principes, vous \u00eates en mesure de cr\u00e9er de nombreux prototypes responsives avec Justinmind. Voici d&rsquo;autres exemples de la mani\u00e8re d&rsquo;y parvenir : <\/p>\n<ul>\n<li><a href=\"https:\/\/www.justinmind.com\/fr\/aide\/creer-un-prototype-de-base-responsable\">Cr\u00e9ez un prototype r\u00e9actif de base<\/a><\/li>\n<li><a href=\"https:\/\/www.justinmind.com\/fr\/aide\/creer-un-menu-conditionnel\">Cr\u00e9er un menu conditionnel<\/a><\/li>\n<li><a href=\"https:\/\/www.justinmind.com\/fr\/aide\/creer-un-tableau-fluide\">Cr\u00e9er un tableau fluide<\/a><\/li>\n<li><a href=\"https:\/\/www.justinmind.com\/fr\/aide\/creer-une-grille-fluide\">Cr\u00e9er une grille fluide<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Les prototypes cr\u00e9\u00e9s en responsive design s&rsquo;affichent bien sur toutes les tailles d&rsquo;\u00e9cran, y compris sur mobile, tablette et ordinateur de bureau.Prototypes r\u00e9actifs Voici ce 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":[8416,8441],"tags":[8449,8452,8454,8455,8451,8453,8450],"class_list":["post-124692","post","type-post","status-publish","format-standard","hentry","category-formation","category-prototypage-reactif","tag-design-reactif","tag-disposition-des-liquides","tag-fluide","tag-grille","tag-liquide","tag-menu-conditionnel","tag-reactif"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124692"}],"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=124692"}],"version-history":[{"count":3,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124692\/revisions"}],"predecessor-version":[{"id":126266,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124692\/revisions\/126266"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}