<!-- 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 s’agit d’associer 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 -->
Publicité
<!-- 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 l’impression @media print { #menu, #footer, aside { display:none; } body { font-size:120%; color:black; } } Ces éléments ne s’afficheront 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 | | 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 { 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 | | 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 |
Publicité
<!-- 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).