Responsive avec les Media Query (en images)

← Les principes · 15 diapositives · flèches ou clic pour avancer

Responsive avec les Media Query - par Nadine Giasson St-Amand - et Sébastien Bois
Cheatsheet - Des résumés de tous les éléments de syntaxe - http://cssmediaqueries.com/ - http://cssmediaqueries.com/overview.html - https://gist.github.com/bartholomej/8415655 - http://www.bsidestudios.com/blog/media-queries-common-sizes-cheat-sheet - http://mac-blog.org.ua/css-3-media-queries-cheat-sheet/
Inspirations - Pour avoir des idées - https://mediaqueri.es/
Query de base - @media screen @media tv @media print - @media 3d-glasses - @media projection - @media aural @media braille @media embossed - @media tty - @media handheld - @media all
Media Query - Desktop - /* DESKTOP VERSION */ - @media only screen and (min-width: 980px) - { - h3:after - { - content: ' - DESKTOP'; - display: inline; - } - }
Media Query - Tablette verticale - /* TABLET PORTRAIT VERSION */ @media only screen and (min-width: 768px) and (max-width: 980px) and (orientation : portrait) - { h3:after - { - content: ' - TABLET PORTRAIT'; - display: inline; - } - }
Media Query - Tablette horizontale - /* TABLET LANDSCAPE VERSION */ @media only screen and (min-width: 768px) and(max-width: 980px) and (orientation : landscape) - { - h3:after - { - content: ' - TABLET LANDSCAPE'; - display: inline; - } - }
Media Query - Mobile - /* PHONE PORTRAIT VERSION */ @media only screen and (min-width: 320px) and(max-width: 768px) and (orientation : portrait) - { - h3:after - { - content: ' - PHONE PORTRAIT'; - display: inline; - } - }
Feuille résumé
Feuille résumé - /* GLOBAL STYLES */ h3 {text-align:center;} - /* PHONE LANDSCAPE VERSION */ @media only screen and (min-width: 320px) and (orientation : landscape) { h3:after {content: ' - PHONE LANDSCAPE'; display: inline;} } /* PHONE PORTRAIT VERSION */ @media only screen and (min-width: 320px) and (orientation : portrait) { h3:after {content: ' - PHONE PORTRAIT'; display: inline;} } /* TABLET…
Références sur les Media Query - Des règles à suivre, des normes, des listes de propriétés - https://www.w3schools.com/css/css_rwd_mediaqueries.asp - https://www.w3schools.com/cssref/css3_pr_mediaquery.asp - https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries - Norme: - https://www.w3.org/TR/css3-mediaqueries/
Tutoriels sur les Media Query - Des guides pour réaliser des mini-projets - https://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Librairies CSS non-sémantiques & Media Query
FlexBox Grid - <div class="row"> <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4"> <div class="box">Responsive</div> </div> </div>
PURE.IO Grid - <div class="pure-g"> <div class="pure-u-1 pure-u-md-1-3"> ... </div> <div class="pure-u-1 pure-u-md-1-3"> ... </div> <div class="pure-u-1 pure-u-md-1-3"> ... </div> </div>