Cheatsheet
Des résumés de tous les éléments de syntaxe :
Inspirations
Pour avoir des idé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é
/* 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 LANDSCAPE VERSION - not work, are the same as desktop */
@media only screen and (min-width: 768px) and (orientation: landscape) {
h3:after {content: ' - TABLET LANDSCAPE'; display: inline;}
}
/* TABLET PORTRAIT VERSION */
@media only screen and (min-width: 768px) and (orientation: portrait) {
h3:after {content: ' - TABLET PORTRAIT'; display: inline;}
}
/* DESKTOP VERSION */
@media only screen and (min-width: 980px) {
h3:after {content: ' - DESKTOP'; display: inline;}
}
Références sur les Media Query
Des règles à suivre, des normes, des listes de propriétés :
La norme : w3.org/TR/css3-mediaqueries
Tutoriels sur les Media Query
Des guides pour réaliser des mini-projets :
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>
Rappel du cours : ces classes ne sont pas sémantiques ; on les étudie pour les reconnaître, pas pour les imiter.
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>