User Tools
2016_2017:s1:webdoc:td6
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
|
2016_2017:s1:webdoc:td6 [2016/12/05 13:45] logre [Méthode 2 : ajouter une garde à une règle CSS] |
2016_2017:s1:webdoc:td6 [2016/12/05 16:31] logre [Syntaxe] |
||
|---|---|---|---|
| Line 56: | Line 56: | ||
| Il suffit de préciser la condition dans la balise d'inclusion du CSS au sein de l'HTML. | Il suffit de préciser la condition dans la balise d'inclusion du CSS au sein de l'HTML. | ||
| La balise <link> dispose en effet d'un attribut "media" qui peut prendre une //media query// comme valeur, incluant une condition sur le type d'écran et la résolution par exemple. | La balise <link> dispose en effet d'un attribut "media" qui peut prendre une //media query// comme valeur, incluant une condition sur le type d'écran et la résolution par exemple. | ||
| - | L'exemple qui va bien : | + | L'exemple minimal : |
| <code html> | <code html> | ||
| <link rel="stylesheet" media="screen and (max-width: 1024px)" href="minipouce.css" /> | <link rel="stylesheet" media="screen and (max-width: 1024px)" href="minipouce.css" /> | ||
| Line 63: | Line 63: | ||
| Il est donc possible de jouer avec les priorités de chargement des fichiers CSS pour avoir un fichier de style par défaut et un style retravaillé pour certains écrans plus petits. | Il est donc possible de jouer avec les priorités de chargement des fichiers CSS pour avoir un fichier de style par défaut et un style retravaillé pour certains écrans plus petits. | ||
| + | <code html> | ||
| + | <!DOCTYPE html> | ||
| + | <html> | ||
| + | <head> | ||
| + | <meta charset="utf-8" /> | ||
| + | <link rel="stylesheet" href="style.css" /> <!-- Pour tout le monde --> | ||
| + | <link rel="stylesheet" media="screen and (max-width: 1024px)" href="minipouce.css" /> <!-- Pour ceux qui ont une résolution inférieure à 1280px --> | ||
| + | <title>Media queries</title> | ||
| + | </head> | ||
| + | ... | ||
| + | </code> | ||
| ===== Méthode 2 : ajouter une garde à une règle CSS ===== | ===== Méthode 2 : ajouter une garde à une règle CSS ===== | ||
| + | |||
| + | L'autre solution est de préciser directement dans votre feuille de style quelles règles sont spécifique à l'adaptation. | ||
| L'exemple suivant cible les écrans de largeur inférieure à 640 pixels grâce à la règle max-width associée à la valeur 640px. | L'exemple suivant cible les écrans de largeur inférieure à 640 pixels grâce à la règle max-width associée à la valeur 640px. | ||
| Line 76: | Line 89: | ||
| </code> | </code> | ||
| + | ===== Un pas de recul ===== | ||
| + | |||
| + | <box round rgb(185,211,238) 95%|**A Faire** : > | ||
| + | * Comparez les avantages et les inconvénients des deux méthodes. | ||
| + | * Y a-t-il des cas où l'une est impossible à appliquer ? | ||
| + | * Sont-elles incompatibles ? | ||
| + | </box> | ||
| ===== Syntaxe ===== | ===== Syntaxe ===== | ||
| Line 81: | Line 101: | ||
| 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. | 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. | ||
| - | Les différents types d'écrans définis sont : | + | Il existe de nombreuses règles permettant de construire des media queries et qui peuvent être composable. |
| - | * //screen// Écrans | + | Voici quelques exemples : |
| - | * //handheld// Périphériques mobiles ou de petite taille | + | * color : gestion de la couleur (en bits/pixel). |
| - | * //print// Impression | + | * height : hauteur de la zone d'affichage (fenêtre). |
| - | * //aural// (CSS 2.0) / //speech// (CSS 2.1) Synthèses vocales | + | * width : largeur de la zone d'affichage (fenêtre). |
| - | * //braille// Plages braille | + | * device-height : hauteur du périphérique. |
| - | * //embossed// Imprimantes braille | + | * device-width : largeur du périphérique. |
| - | * //projection// Projecteurs (ou présentations avec slides) | + | * orientation : orientation du périphérique (portrait ou paysage). |
| - | * //tty// Terminal/police à pas fixe | + | * media : type d'écran de sortie. Quelques-unes des valeurs possibles : |
| - | * //tv// Téléviseur | + | * screen : écran « classique » ; |
| - | * //all// Tous les précédents | + | * handheld : périphérique mobile ; |
| + | * print : impression ; | ||
| + | * tv : télévision ; | ||
| + | * projection : projecteur ; | ||
| + | * all : tous les types d'écran. | ||
| + | * | ||
| + | <note tip>On peut rajouter le préfixe min- ou max- devant la plupart de ces règles. Ainsi, min-width signifie « Largeur minimale », max-height « Hauteur maximale », etc.</note> | ||
2016_2017/s1/webdoc/td6.txt · Last modified: 2016/12/09 09:18 by logre
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
