---
title: Adaptative
slug: Web/Progressive_web_apps/Adaptative
tags:
  - Applications
  - Design adaptatif
  - Media Queries
  - flexbox
  - viewport
translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_blocks
translation_of_original: Web/Progressive_web_apps/Responsive
---
<div class="column-container summary">
<div class="column-11">Les applications web adaptatives utilisent des technologies comme les media queries et viewport pour être sûre que leur interface convient avec tout les facteurs de forme: bureau, téléphone, tablette, ou peut importe ce qui viendra après.</div>

<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg"></div>
</div>

<h2 id="Guides">Guides</h2>

<dl>
 <dt><a href="/fr/Apps/app_layout/responsive_design_building_blocks" lang="fr">Les fondations du design adaptatif</a></dt>
 <dd>Apprendre les bases du design adaptatif, un sujet essentiel pour l'affichage des applications web modernes.</dd>
 <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Mobile_first" lang="en">Mobile avant tout (<em>Mobile first</em>)</a></dt>
 <dd>Souvent lors de la création de l'affichage d'une application adaptative, il est judicieux de créer en premier le rendu sur téléphone mobile, et d'utiliser ce rendu comme base pour concevoir les écrans plus larges.</dd>
</dl>

<h2 id="Technologies">Technologies</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Technologie</th>
   <th scope="col">Description</th>
   <th scope="col">Résumé du support</th>
   <th scope="col">Dernière spécification</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="/fr/docs/Web/CSS/Media_Queries">Media queries</a></td>
   <td>Permet de définir des conditions permettant aux styles d'être appliqués aux contenus en fonction de l'affichage disponible (<em>viewport</em>), de la résolution, de l'orientation, etc.</td>
   <td>Répandu sur les navigateurs modernes (<a href="/fr/docs/Web/CSS/Media_Queries#Browser_compatibility">plus de détails</a>)</td>
   <td><a href="https://drafts.csswg.org/mediaqueries-4/">Media Queries Level 4</a></td>
  </tr>
  <tr>
   <td><a href="/fr/docs/Web/CSS/@viewport">@viewport</a>/<a href="/fr/docs/Mozilla/Mobile/Viewport_meta_tag">viewport meta tag</a></td>
   <td>Contrôler la configuration du <em>viewport</em>, principalement sur les appareils mobiles.</td>
   <td>@viewport: Expérimental (<a href="/fr/docs/Web/CSS/@viewport#Browser_compatibility">plus de détails</a>)<br>
    <em>Viewport meta tag</em>: Répandu sur les appareils mobiles modernes</td>
   <td><a href="https://drafts.csswg.org/css-device-adapt/#the-atviewport-rule">CSS Device Adaptation Module Level 1</a></td>
  </tr>
  <tr>
   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
   <td>Une fonctionnalité CSS très utile pour créer une mise en page flexible et adaptative.</td>
   <td>Répandu sur les navigateurs modernes (<a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout#Browser_compatibility">plus de détail</a>)</td>
   <td><a href="https://drafts.csswg.org/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a></td>
  </tr>
 </tbody>
</table>

<h2 id="Outils">Outils</h2>

<dl>
 <dt><a class="external" href="https://modernizr.com/">Modernizr</a></dt>
 <dd>Une bibliothèque d'outils de détection des fonctionnalités pour appliquer différents CSS ou JS en fonctions de comment les différentes fonctionnalités CSS/JS sont supportées.</dd>
 <dt><a class="external" href="https://code.google.com/archive/p/css3-mediaqueries-js/">css3-mediaqueries-js</a></dt>
 <dd>Un <em>polyfill</em> en JavaScript pour assurer le support de <em>media query</em> aux anciennes versions de IE (5+.)</dd>
</dl>

<h2 id="Voir_aussi">Voir aussi</h2>

<dl>
 <dt><a href="/fr/Apps/Design/Design_graphique_pour_les_sites_responsiveGraphics_for_responsive_sites" lang="en">Graphiques dans les sites adaptatifs</a></dt>
 <dd>Points à garder à l'esprit lors de la conception de graphiques pour des sites ou des applications adaptatives.</dd>
 <dt><a href="/fr/Apps/Design/Patrons_navigation_adaptative" lang="en">Modèle de navigation adaptative</a></dt>
 <dd>Comment faire une interface aussi ressemblante et fonctionnelle sur téléphone mobile que sur bureau? Apprenez comment concevoir des interfaces qui changent pour s'adapter à l'écran de l'utilisateur.</dd>
</dl>