Exemples
Exemple 1
Prenons l'exemple d'un menu. En vue bureau, les items se placeront côte à côte.
En vue mobiles, les items se placeront les uns au dessus des autres.
Etape 1
- Créez la structure html
Etape 2
- Définir les styles pour la vue bureau
Etape 3
- Se poser la question suivante :
Quels sont les changements qui doivent être opérés ?
Les éléments de la liste doivent se positionner les uns au dessus des autres.
Seuls les styles permettant ce changement devront être spécifiés.
Décommentez la média queries et testez
Exemple 2
Prenons, cette interface. Sur des écrans moyens, on affichera l'<aside> en-dessous de la <section>.
Sur des petits écrans, l'<aside> sera masqué.
Etape 1
- Créez les styles pour afficher les éléments sur un écran large
Vue large
Etape 2
- Créez les styles pour afficher les éléments sur un écran moyen
- Se poser la question suivante : Quels sont les changements qui doivent être opérés ?
Seuls les styles permettant ces changements devront être spécifiés.
Vue moyenne
Etape 3
- Créez les styles pour afficher les éléments sur une petit écran
- Se poser la question suivante : Quels sont les changements qui doivent être opérés ?
Seuls les styles permettant ces changements devront être spécifiés.
Vue small
