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:47] logre [Méthode 1 : une feuille de style par résolution] |
2016_2017:s1:webdoc:td6 [2016/12/05 16:50] logre [Syntaxe] |
||
---|---|---|---|
Line 75: | Line 75: | ||
</code> | </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 87: | 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 92: | 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> | ||
+ | |||
+ | <box round rgb(185,211,238) 95%|**A Faire** : > | ||
+ | Ecrire les //media queries// et les règles CSS permettant de cibler : | ||
+ | * les écrans, quand la largeur de la fenêtre fait au maximum 1280px, pour mettre le fond en noir. | ||
+ | * tous types de supports, quand la largeur de la fenêtre est comprise entre 1024px et 1280px, pour mettre le texte en rouge. | ||
+ | * tous types d'écrans orientés verticalement, pour mettre les titres en gras. | ||
+ | </box> | ||
+ | |||
+ | ===== Les navigateurs mobiles ===== | ||
+ | |||
+ | Afin d'optimiser l'affichage sur les plus petits écrans, les navigateurs mobiles utilisent un affichage dézoomé qui simule une meilleure résolution. | ||
+ | Cela s'appelle le **viewport**. | ||
+ | Une //media query// qui cible le support mobile avec un ''max-width'' sur un mobile va donc utiliser la longueur du viewport. | ||
+ | Or, celle-ci est inhérente au navigateur lui-même ! Puisque chacun implémente cette simulation par zoom à sa façon. | ||
+ | |||
+ | Quelques exemples : | ||
+ | * **Opera Mobile** 850 pixels | ||
+ | * **iPhone Safari** 980 pixels | ||
+ | * **Android** 800 pixels | ||
+ | * **Windows Phone** 1024 pixels | ||
+ | |||
+ | Ainsi, un Android se comporte comme si la fenêtre faisait 800px de large, tandis que l'utilisateur de Windows phone voit son CSS considérer qu'il en a 1024! | ||
+ | |||
+ | Simple palliatif : ''max-device-width'' qui demande la largeur du périphérique (du support) et non du navigateur (le logiciel). | ||
+ | |||
+ | |||
+ | <box round rgb(185,211,238) 95%|**A Faire** : > | ||
+ | * Ecrire la //media query// et les règles CSS permettant d'afficher tous les liens en vert sur mobile et testez. | ||
+ | * Mettez en évidence la différence de viewport avec un même code exécuté sur Android et sur iPhone (ou windows phone si vous en trouvez un) | ||
+ | * Théoriquement, quelle autre media query devrait nous éviter ce problème ? Pourquoi ne fonctionne-t-elle pas ? | ||
+ | </box> | ||