Généralités
Le RWD c'est adapter l'organisation des balises du document aux dimensions de l'écran dans lequel s'ouvre le document.
Pour les grand écrans on va avoir tendances à travailler sur la largeur, avec des petits écrans on va par contre travailler sur la hauteur en empillant les balises verticalement.
Dans le fichier HTML: la meta viewport, elle est indispensable
Dans le fichier CSS:
- on commence par placer les balises principales par défaut
- ensuite on décrit la mise en page générale des balises
- on termine en plaçant les balises principales pour les écrans plus petits,
pour chaque commande @media on reprécise la mise en page des balises dont l'aspect doit changer
Un exemple
Démo
<head>
<meta charset="UTF-8">
<style>
body{margin:0;}
/*On place les balises principales par défaut*/
.container {
min-height:100vh;
display:grid;
grid-template-columns:repeat(6,1fr);
grid-template-rows:100px 1fr 50px;
grid-template-areas:
"header header nav nav nav nav"
"main main main main main aside"
"pied pied pied pied pied pied";
}
/*On décrit la mise en page générale*/
.header {
grid-area:header;
background:#33FF8D;
}
.nav {
grid-area:nav;
background:#F1948A ;
}
.main {
grid-area:main;
background:#D2B4DE;
}
.footer {
grid-area:pied;
background:#F9E79F;
}
.aside {
grid-area:aside;
background:#F2D7D5;
}
/*On place les balises principales pour les écrans plus petits*/
@media screen and (max-width:800px){
.container {
grid-template-columns:repeat(6,1fr);
grid-template-rows:100px 50px 1fr 50px;
grid-template-areas:
"header header header header header header"
"nav nav nav nav nav nav"
"main main main main main aside"
"pied pied pied pied pied pied";
}
}
@media screen and (max-width:500px){
.container {
grid-template-columns:repeat(6,1fr);
grid-template-rows:100px 100px 1fr 50px 50px;
grid-template-areas:
"header header header header header header"
"nav nav nav nav nav nav"
"main main main main main main"
"aside aside aside aside aside aside"
"pied pied pied pied pied pied";
}
}</style>
</head>
<body>
<div class=container>
<header class=header>header</header>
<nav class=nav>nav</nav>
<main class=main>main</main>
<aside class=aside>aside</aside>
<footer class=footer>footer</footer>
</div>
</body>
