diff options
Diffstat (limited to 'files/fr/learn/css/css_layout/responsive_design/index.html')
| -rw-r--r-- | files/fr/learn/css/css_layout/responsive_design/index.html | 92 |
1 files changed, 40 insertions, 52 deletions
diff --git a/files/fr/learn/css/css_layout/responsive_design/index.html b/files/fr/learn/css/css_layout/responsive_design/index.html index 05df9cfd85..312eea3059 100644 --- a/files/fr/learn/css/css_layout/responsive_design/index.html +++ b/files/fr/learn/css/css_layout/responsive_design/index.html @@ -17,7 +17,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Aux débuts de la conception Web, les pages étaient construites pour cibler une taille d'écran particulière. Si l'utilisateur avait un écran plus grand ou plus petit que celui du concepteur, les résultats attendus pouvaient aller de barres de défilement indésirables, à des longueurs de lignes trop longues, et à une mauvaise utilisation de l'espace. À mesure que des tailles d'écran plus variées devenaient disponibles, le concept de <em>responsive web design</em> (RWD) est apparu, un ensemble de pratiques qui permet aux pages Web de modifier leur disposition et leur apparence pour s'adapter à différentes largeurs d'écran, résolutions, etc. C'est une idée qui a changé notre façon de concevoir pour un web multi-périphériques, et dans cet article nous vous aiderons à comprendre les principales techniques que vous devez connaître pour la maîtriser.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -41,26 +41,22 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Ces deux approches donnaient lieu à un site Web qui avait fière allure sur l'écran de la personne qui le concevait ! Les site liquides avaient pour résultat un design écrasé sur les petits écrans (comme on le voit ci-dessous) et des longueurs de lignes illisibles sur les plus grands.</p> -<figure><img alt="Une mise en page avec deux colonnes écrasées dans une fenêtre de taille mobile." src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;"> -<figcaption></figcaption> -</figure> +<img alt="Une mise en page avec deux colonnes écrasées dans une fenêtre de taille mobile." src="mdn-rwd-liquid.png"> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Voir cette simple mise en page "liquide" : <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">code source</a>. Lorsque vous regardez l'exemple, faites glisser la fenêtre de votre navigateur vers l'intérieur et vers l'extérieur pour voir comment cela se présente en fonction des différentes tailles.</p> +<div class="note"> +<p><strong>Note :</strong> Voir cette simple mise en page "liquide" : <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">code source</a>. Lorsque vous regardez l'exemple, faites glisser la fenêtre de votre navigateur vers l'intérieur et vers l'extérieur pour voir comment cela se présente en fonction des différentes tailles.</p> </div> <p>Les sites à largeur fixe risquaient d'avoir une barre de défilement horizontale sur les écrans plus petits que la largeur du site (comme on le voit ci-dessous), et beaucoup d'espace blanc sur les bords sur les écrans plus grands.</p> -<figure><img alt="Une mise en page avec une barre de défilement horizontale dans une fenêtre de visualisation mobile." src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;"> -<figcaption></figcaption> -</figure> +<img alt="Une mise en page avec une barre de défilement horizontale dans une fenêtre de visualisation mobile." src="mdn-rwd-fixed.png"> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Voir cette simple mise en page à largeur fixe : <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">code source</a>. Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur.</p> +<div class="note"> +<p><strong>Note :</strong> Voir cette simple mise en page à largeur fixe : <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">code source</a>. Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur.</p> </div> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Les captures d'écran ci-dessus sont réalisées à l'aide de la <a href="/fr/docs/Outils/Vue_adaptative">Vue adaptative</a> de la boîte à outils de Firefox.</p> +<div class="note"> +<p><strong>Note :</strong> Les captures d'écran ci-dessus sont réalisées à l'aide de la <a href="/fr/docs/Outils/Vue_adaptative">Vue adaptative</a> de la boîte à outils de Firefox.</p> </div> <p>Lorsque le web mobile a commencé à devenir une réalité avec les premiers téléphones à fonctions, les entreprises qui souhaitaient adopter le mobile créaient généralement une version mobile spéciale de leur site, avec une URL différente (souvent quelque chose comme m.example.com, ou example.mobi). Cela signifiait qu'il fallait développer deux versions distinctes du site et les tenir à jour.</p> @@ -69,7 +65,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <h2 id="Mise_en_page_flexible_avant_le_responsive_design">Mise en page flexible avant le responsive design</h2> -<p>Un certain nombre d'approches ont été développées pour tenter de résoudre les inconvénients des méthodes de construction de sites Web liquide et à largeur fixe. En 2004, Cameron Adams a écrit un article intitulé <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Mise en page en fonction de la résolution</a> <sup>(EN)</sup>, décrivant une méthode de création de design pouvant s'adapter à différentes résolutions d'écran. Cette approche nécessitait l'utilisation de JavaScript pour détecter la résolution d'écran et charger la bonne CSS.</p> +<p>Un certain nombre d'approches ont été développées pour tenter de résoudre les inconvénients des méthodes de construction de sites Web liquide et à largeur fixe. En 2004, Cameron Adams a écrit un article intitulé <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Mise en page en fonction de la résolution</a>, décrivant une méthode de création de design pouvant s'adapter à différentes résolutions d'écran. Cette approche nécessitait l'utilisation de JavaScript pour détecter la résolution d'écran et charger la bonne CSS.</p> <p>Zoe Mickley Gillenwater a grandement contribué au travail de description et de formalisation des différentes façons de créer des sites flexibles, en essayant de trouver un juste milieu entre remplir l'écran ou être complètement fixe en taille.</p> @@ -93,7 +89,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Par exemple, la média query suivante teste si la page Web actuelle est affichée comme média d'écran (donc pas un document à imprimer) et si la fenêtre de visualisation a au moins 800 pixels de large. Le CSS du sélecteur <code>.container</code> ne sera appliqué que si ces deux éléments sont vrais.</p> -<pre class="brush: css notranslate"><code>@media screen and (min-width: 800px) { +<pre class="brush: css"><code>@media screen and (min-width: 800px) { .container { margin: 1em 2em; } @@ -114,12 +110,12 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser <a href="/fr/docs/Apprendre/CSS/CSS_layout/Floats">floats</a>. Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser des flotteurs. Des mises en page flottantes flexibles ont été réalisées en donnant à chaque élément un pourcentage de largeur et en s'assurant que les totaux ne dépassent pas 100 % dans toute la mise en page. Dans sa publication originale sur les grilles fluides, Marcotte a détaillé une formule pour convertir en pourcentages une mise en page conçue à l'aide de pixels.</p> -<pre class="notranslate"><code>target / context = result </code> +<pre><code>target / context = result </code> </pre> <p>Par exemple, si la taille de notre colonne cible est de 60 pixels et que le contexte (ou conteneur) dans lequel elle se trouve est de 960 pixels, nous divisons 60 par 960 pour obtenir une valeur que nous pouvons utiliser dans notre CSS, après avoir déplacé le point décimal de deux places vers la droite.</p> -<pre class="brush: css notranslate"><code>.col { +<pre class="brush: css"><code>.col { width: 6.25%; /* 60 / 960 = 0.0625 */ } </code> </pre> @@ -129,36 +125,32 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>L'exemple suivant montre une conception simple et responsive en utilisant des médias queries et une grille flexible. Sur des écrans étroits, la mise en page affiche les boîtes entassées les unes sur les autres :<br> </p> -<figure><img alt="A mobile view of the layout with boxes stacked on top of each other vertically." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;"> -<figcaption></figcaption> -</figure> +<img alt="A mobile view of the layout with boxes stacked on top of each other vertically." src="mdn-rwd-mobile.png"> <p>Sur des écrans plus larges, ils se positionnent sur deux colonnes :</p> -<figure><img alt="A desktop view of a layout with two columns." src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;"> -<figcaption></figcaption> -</figure> +<img alt="A desktop view of a layout with two columns." src="mdn-rwd-desktop.png"> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Vous pouvez trouver l'<a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">exemple en direct</a> et le <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">code source</a> pour cet exemple sur GitHub.</p> +<div class="note"> +<p><strong>Note :</strong> Vous pouvez trouver l'<a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">exemple en direct</a> et le <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">code source</a> pour cet exemple sur GitHub.</p> </div> <h2 id="Techniques_modernes_de_mise_en_page">Techniques modernes de mise en page</h2> -<p>Les méthodes de mise en page modernes telles que <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, et <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a> sont responsives par défaut. Elles partent toutes du principe que vous essayez de créer une grille flexible et vous donnent des moyens plus faciles de le faire.</p> +<p>Les méthodes de mise en page modernes telles que <a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a>, <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, et <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a> sont responsives par défaut. Elles partent toutes du principe que vous essayez de créer une grille flexible et vous donnent des moyens plus faciles de le faire.</p> <h3 id="Multicol">Multicol</h3> <p>La plus ancienne de ces méthodes de mise en page est multicol — lorsque vous spécifiez un <code>column-count</code>, cela indique en combien de colonnes vous voulez que votre contenu soit divisé. Le navigateur calcule alors la taille de celles-ci, une taille qui changera en fonction de la taille de l'écran.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { column-count: 3; } </code> </pre> <p>Si vous spécifiez plutôt une largeur de colonne, vous spécifiez une largeur minimale. Le navigateur créera autant de colonnes de cette largeur qu'il en faudra pour que le conteneur soit parfaitement adapté, puis répartira l'espace restant entre toutes les colonnes. Par conséquent, le nombre de colonnes changera en fonction de l'espace disponible.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { column-width: 10em; } </code> </pre> @@ -169,7 +161,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Dans l'exemple ci-dessous, les éléments flex prendront chacun autant d'espace dans le conteneur flex, en utilisant la notation <code>flex: 1</code> comme décrit dans la rubrique de mise en page <a href="/fr/docs/Apprendre/CSS/CSS_layout/Flexbox#Taille_modulable_des_éléments_flex">Flexbox: Taille modulable des éléments flex</a>.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { display: flex; } @@ -178,29 +170,29 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design } </code> </pre> -<div class="blockIndicator note"> -<p><strong>Note</strong>: À titre d'exemple, nous avons reconstruit la mise en page simple et réactive ci-dessus, en utilisant cette fois-ci la méthode flexbox. Vous pouvez voir comment nous n'avons plus besoin d'utiliser des pourcentages étranges pour calculer la taille des colonnes : <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">code source</a>.</p> +<div class="note"> +<p><strong>Note :</strong> À titre d'exemple, nous avons reconstruit la mise en page simple et réactive ci-dessus, en utilisant cette fois-ci la méthode flexbox. Vous pouvez voir comment nous n'avons plus besoin d'utiliser des pourcentages étranges pour calculer la taille des colonnes : <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">code source</a>.</p> </div> <h3 id="CSS_grid">CSS grid</h3> <p>Dans la mise en page en grille CSS, l'unité <code>fr</code> permet la répartition de l'espace disponible sur les différentes sections de la grille. L'exemple suivant crée un conteneur de grille avec trois rangées dont la taille est de <code>1fr</code>. Cela créera trois colonnes, chacune prenant une partie de l'espace disponible dans le conteneur. Vous pouvez en savoir plus sur cette approche pour créer une grille dans la rubrique Apprendre la mise en place en grille, dans la section <a href="/fr/docs/Apprendre/CSS/CSS_layout/Grids#Trames_adaptables_avec_lunité_«_fr_»">Trames adaptables avec l'unité "fr"</a>.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { display: grid; grid-template-columns: 1fr 1fr 1fr; } </code> </pre> -<div class="blockIndicator note"> -<p><strong>Note</strong>: La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">code source</a>.</p> +<div class="note"> +<p><strong>Note :</strong> La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">code source</a>.</p> </div> <h2 id="Images_responsives">Images responsives</h2> <p>L'approche la plus simple pour les images responsive est celle décrite dans les premiers articles de Marcotte sur le design responsive. En gros, vous preniez une image qui était à la plus grande taille possible et vous la réduisiez. C'est encore une approche utilisée aujourd'hui, et dans la plupart des feuilles de style, vous trouverez le CSS suivant quelque part :</p> -<pre class="brush: css notranslate"><code>img { +<pre class="brush: css"><code>img { max-width: 100%: } </code> </pre> @@ -211,7 +203,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Vous pouvez également créer des images directes utilisées à différentes tailles, ce qui permet d'obtenir un recadrage différent ou une image complètement différente pour différentes tailles d'écran.</p> -<p>Vous pouvez trouver un <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">guide détaillé sur les Images Responsives dans la section Apprendre le HTML</a> ici sur MDN.</p> +<p>Vous pouvez trouver un <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">guide détaillé sur les Images Responsives dans la section Apprendre le HTML</a> ici sur MDN.</p> <h2 id="Typographie_responsive">Typographie responsive</h2> @@ -219,7 +211,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Dans cet exemple, nous voulons fixer notre titre de niveau 1 à <code>4rem</code>, ce qui signifie qu'il sera quatre fois plus gros que notre police de base. C'est un très grand titre ! Nous voulons que ce titre géant ne soit utilisé que sur des écrans de grande taille, c'est pourquoi nous créons d'abord un titre plus petit, puis nous utilisons des média queries pour le remplacer par un titre de plus grande taille si nous savons que l'utilisateur a une taille d'écran d'au moins <code>1200px</code>.</p> -<pre class="brush: css notranslate"><code>html { +<pre class="brush: css"><code>html { font-size: 1em; } @@ -238,18 +230,14 @@ h1 { <p>Sur un mobile, le titre est plus petit :</p> -<figure><img alt="A stacked layout with a small heading size." src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;"> -<figcaption></figcaption> -</figure> +<img alt="A stacked layout with a small heading size." src="mdn-rwd-font-mobile.png"> <p>Sur le bureau cependant, nous voyons la plus grande taille de titre :</p> -<figure><img alt="A two column layout with a large heading." src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;"> -<figcaption></figcaption> -</figure> +<img alt="A two column layout with a large heading." src="mdn-rwd-font-desktop.png"> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Voir cet exemple en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">code source</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Voir cet exemple en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">code source</a>.</p> </div> <p>Comme le montre cette approche de la typographie, vous n'avez pas besoin de limiter les requêtes des médias à la seule modification de la mise en page. Elles peuvent être utilisées pour modifier n'importe quel élément afin de le rendre plus utilisable ou plus attrayant à des tailles d'écran différentes.</p> @@ -258,7 +246,7 @@ h1 { <p>Une approche intéressante consiste à utiliser l'unité viewport <code>vw</code> pour permettre une typographie réactive. <code>1vw</code> est égal à un pour cent de la largeur de la fenêtre, ce qui signifie que si vous définissez la taille de votre police à l'aide de <code>vw</code>, elle sera toujours liée à la taille de la fenêtre.</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: 6vw; }</pre> @@ -266,21 +254,21 @@ h1 { <p>Il existe une solution, et elle consiste à utiliser <code><a href="/fr/docs/Web/CSS/calc">calc()</a></code>. Si vous ajoutez l'unité <code>vw</code> à un ensemble de valeurs utilisant une taille fixe telle que <code>em</code>s ou <code>rem</code>s, le texte sera toujours zoomable. En fait, l'unité <code>vw</code> s'ajoute à cette valeur zoomée :</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: calc(1.5rem + 3vw); }</pre> <p>Cela signifie que nous n'avons besoin de spécifier la taille de la police pour l'en-tête qu'une seule fois, plutôt que de la configurer pour les mobiles et de la redéfinir dans les requêtes des médias. La police augmente ensuite progressivement à mesure que l'on augmente la taille de la zone d'affichage.</p> -<div class="blockIndicator note"> -<p>Voir un exemple de cela en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">code source</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Voir un exemple de cela en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">code source</a>.</p> </div> <h2 id="Le_méta-tag_du_viewport">Le méta-tag du viewport</h2> <p>Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante {{htmlelement("meta")}} dans la section <code><head></code> du document.</p> -<pre class="brush: html notranslate"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> +<pre class="brush: html"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> </pre> <p>Cette balise meta dit aux navigateurs mobiles qu'ils doivent ajuster la largeur de la fenêtre à la largeur de l'écran de l'appareil, et mettre l'échelle du document à 100% de sa taille prévue, affichant le document à la taille optimisée pour les mobiles que vous vouliez.</p> @@ -305,8 +293,8 @@ h1 { <p>Vous devriez éviter d'utiliser <code>minimum-scale</code>, <code>maximum-scale</code>, et en particulier la définition de <code>user-scalable</code> sur <code>no</code>. Les utilisateurs devraient être autorisés à zoomer autant ou aussi peu que nécessaire; éviter cela entraîne des problèmes d'accessibilité.</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — <a href="/fr/docs/Web/CSS/@viewport">@viewport</a> — Cependant, son support par navigateur est médiocre. Il a été mis en œuvre dans Internet Explorer et Edge, mais une fois que Edgium (La version Edge basée sur Chromium) sera livré, il ne fera plus partie du navigateur Edge.</p> +<div class="note"> +<p><strong>Note :</strong> Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — <a href="/fr/docs/Web/CSS/@viewport">@viewport</a> — Cependant, son support par navigateur est médiocre. Il a été mis en œuvre dans Internet Explorer et Edge, mais une fois que Edgium (La version Edge basée sur Chromium) sera livré, il ne fera plus partie du navigateur Edge.</p> </div> <h2 id="Sommaire">Sommaire</h2> |