Informatique


Un document responsive

Aller à



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>