media-queries, breakpoints
##########################

Les média-queries sont des instructions CSS dépendante du dispositif d'affichage. S'agit-il d'un écran à encre électronique ? D'un écran TV ? Quel est le pixel ratio ? la largeur ? Tous ces éléments peuvent permettre de modifier contextuellement la mise en forme.

.. seealso::

   * `Documentation relative aux media queries sur le Mozilla Developer Network <https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries>`_
   * `Les breakpoints avec bootstrap <https://getbootstrap.com/docs/4.3/layout/grid/#grid-options>`_

.. figure:: ../images/onf.ca-breakpoint.png
   :alt: illustration d'un breakpoint sur le site de l'ONF (onf.ca)
   :align: center

   illustration d'un breakpoint sur le site de l'ONF (onf.ca). Lorsque l'on passe de 768 pixels CSS de large à 767 pixels, la mise en page est changée, passant de trois à deux colonnes.