<!-- Slide number: 1 -->
Media Queries
Ouali mohamed
<!-- Slide number: 2 -->
Les Media Queries CSS3
La sp cification CSS3 Media Queries d finit les techniques pour l'application de feuilles de styles en fonction des p riph riques de consultation utilis s pour du HTML.
Responsive Web Design
=
Adapter dynamiquement le design l'aide de CSS.
Il sagit dassocier des r gles CSS compl mentaires pour l'impression, modifiant la mise en page, favorisant tel l ment ou faisant dispara tre un autre inutile la sortie sur papier, par exemple un menu de navigation.
<!-- Slide number: 3 -->
! (Picture2.jpg)
<!-- Slide number: 4 -->
La r gle @media
Ces directives peuvent parfaitement tre int gr es au sein m me d'une feuille de style gr ce une r gle @media suivie directement du type
Lors de limpression
@media print {
#menu, #footer, aside {
Publicité
display:none;
}
body {
font-size:120%;
color:black;
}
}
Ces l ments ne safficheront pas
On augmente la taille du texte
Avec une couleur de texte noire
<!-- Slide number: 5 -->
La r gle @media
L'attribut media peut prendre (depuis CSS2) les valeurs suivantes :
| Media | Signification |
| --- | --- |
| embossed | Imprimantes braille |
| projection | Projecteurs (ou pr sentations avec slides) |
| tty | Terminal |
| tv | T l viseur |
| all | Tous les pr c dents |
Publicité
| Media | Signification |
| --- | --- |
| screen | crans |
| handheld | P riph riques mobiles ou de petite taille |
| print | Impression |
| speech | Synth ses vocales |
| braille | Plages braille |
<!-- Slide number: 6 -->
Syntaxe des Media Queries CSS3
une media query est une expression dont la valeur est toujours vraie ou fausse.
On peut associer les diff rentes d clarations possibles avec un op rateur logique.
and : "et",
only : "uniquement"
not : "non".
Pour obtenir l' quivalent du "ou", il suffit d' num rer diff rentes media queries la suite, s par es par des virgules
si l'une d'entre elles est valable, alors l'ensemble de la r gle sera appliqu e.
<!-- Slide number: 7 -->
Syntaxe des Media Queries CSS3
@media screen and (min-width: 200px) and (max-width: 640px) {
.bloc {
Publicité
display:block;
clear:both;
}
}
@media screen and (max-width: 640px) {
.bloc {
display:block;
clear:both;
}
}
Ecran de largeur inf rieure 640 pixels
cran dont la r solution en largeur est comprise entre 200 et 640 pixels :
<!-- Slide number: 8 -->
Fonctionnalit s
La plupart des crit res (ou fonctionnalit s) peuvent tre pr fix s par min- et max- lorsqu'elles acceptent des valeurs num riques pour d finir des valeurs minimales ou maximales respecter.
| Crit re | Signification |
| --- | --- |
| color | support de la couleur (bits/pixel) |
| device-aspect-ratio | ratio du p riph rique de sortie (par exemple 16/9) |
| aspect-ratio | ratio de la zone d'affichage |
Publicité
| device-height | dimension en hauteur du p riph rique |
| device-width | dimension en largeur du p riph rique |
| scan | type de balayage des t l viseurs (progressive ou interlace) |
| Crit re | Signification |
| --- | --- |
| grid | p riph rique bitmap ou grille (ex : lcd) |
| height | dimension en hauteur de la zone d'affichage |
| width | dimension en largeur de la zone d'affichage |
| monochrome | p riph rique monochrome ou niveaux de gris (bits/pixel) |
| orientation | orientation du p riph rique (portait ou landscape) |
| resolution | Plages braille |
<!-- Slide number: 9 -->
Fonctionnalit s
Les dimensions pourront tre valu es avec des unit s (px, em).
Les ratio avec des fractions (entier/entier).
Une r solution sera d finie en dpi (points par pouce) ou en dpcm (points par centim tres).