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 Last revision Both sides next revision | ||
|
2016_2017:s1:webdoc:td6 [2016/12/05 16:50] logre [Syntaxe] |
2016_2017:s1:webdoc:td6 [2016/12/05 17:05] logre [Méthode 2 : ajouter une garde à une règle CSS] |
||
|---|---|---|---|
| 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 151: | Line 153: | ||
| + | ===== 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 pas à 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.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
