Differences

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

--- 2016_2017:s1:webdoc:td6 [2016/12/05 13:44]
logre [Les media queries en CSS3]
+++ 2016_2017:s1:webdoc:td6 [2016/12/09 09:18] (current)
logre [Et en pratique ?]
@@ Line 56: / Line 56: @@
 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.
-L'exemple qui va bien :
+L'exemple minimal :
 <code html>
 <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.
+<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 =====
+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.
 <code css>
@@ Line 74: / Line 89: @@
 </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 =====
@@ Line 79: / 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.
-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>

Cours au département INFO - IUT - UNS

User Tools

Site Tools

Differences

Page Tools