User Tools

Site Tools


2016_2017:s1:webdoc:td6

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
2016_2017:s1:webdoc:td6 [2016/12/05 13:54]
logre [Méthode 2 : ajouter une garde à une règle CSS]
2016_2017:s1:webdoc:td6 [2016/12/09 09:18] (current)
logre [Et en pratique ?]
Line 89: Line 89:
 </​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 =====
 +
 +<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 94: 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.1Synthè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,​23895%|**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,​23895%|**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>​
  
2016_2017/s1/webdoc/td6.1480942463.txt.gz · Last modified: 2016/12/05 13:54 by logre