This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
2016_2017:s1:webdoc:td6 [2016/12/05 13:56] logre [Un pas de recul] |
2016_2017:s1:webdoc:td6 [2016/12/09 09:18] logre [Et en pratique ?] |
||
---|---|---|---|
Line 88: | Line 88: | ||
} | } | ||
</code> | </code> | ||
+ | |||
+ | Pour d'autres exemples au besoin : [[https://course.oc-static.com/ftp-tutos/cours/html-css/p4/ch5/media_query_base/index.html|Un ici]], [[http://www.alsacreations.com/article/lire/930-css3-media-queries.html|quelques uns là]], [[http://dailygeekshow.com/wp-content/uploads/2014/11/mouton.jpg|et pourquoi pas ?]] | ||
===== Un pas de recul ===== | ===== Un pas de recul ===== | ||
Line 101: | Line 103: | ||
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> | ||
+ | |||
+ | |||
+ | ===== Et en pratique ? ===== | ||
+ | |||
+ | Une bonne idée est de limiter les menus latéraux sur les petits écrans verticaux voir d'éliminer les menus qui défilent avec le scroll. | ||
+ | Cela nécessite de restructurer sa page. | ||
+ | |||
+ | <box round rgb(185,211,238) 95%|**A Faire** : > | ||
+ | * Concevez ou reprenez une page web disposant d'un menu visible à tout instant et d'une colonne à gauche et à droite présentant respectivement le menu de la page et les partenaires du site. | ||
+ | * Ecrivez le CSS nécessaire à l'adaptation de cette page à une navigation sur mobile. Testez. | ||
+ | * Quels changements proposez-vous pour une adaptation vers un écran géant 40" ? Implémentez-les dans votre CSS. | ||
+ | </box> | ||
+ | |||
+ | |||
+ | |||
+ | ===== Je dois savoir ===== | ||
+ | |||
+ | <box round rgb(255,150,103) 97%|Je dois savoir : > | ||
+ | * Les media queries permettent d'appliquer différents styles CSS en fonction de certaines conditions. | ||
+ | * Il existe de nombreux paramètres booléens à disposition : nombre de couleurs, résolution de l'écran, orientation... | ||
+ | * On utilise a directive @media d'une ou plusieurs conditions, le style CSS qui suit sera appliqué si elles sont remplies. | ||
+ | * Les navigateurs mobiles simulent une largeur d'écran : on appelle cela le viewport. | ||
+ | * On peut cibler les smartphones grâce à une règle basée sur le nombre réel de pixels affichés à l'écran : ''max-device-width''. | ||
+ | </box> | ||