Responsive design – Utiliser les media queries

Pascal FurlanCSS

Les requêtes média (media queries) permettent de modifier l’apparence d’un site en fonction du type d’appareil et de ses caractéristiques, que ce soit sa résolution d’écran ou la largeur de la zone d’affichage (viewport).

Cet exercice a permis de travailler sur trois types d’affichage : le mobile, la tablette et le PC.

Ci-dessous, le code HTML :

Puis, le code CSS a été séparé en deux fichiers distincts : les styles-communs.css pour regrouper tout ce qui concerne l’apparence de la page web, et le responsive-01.css pour y regrouper les différents media queries.

Le code « styles-communs.css » :

@import url(‘https://fonts.googleapis.com/css?family=Roboto:100,400,400i,700,700i,900’);*,
::before,
::after {
box-sizing: border-box;
}img {
max-width: 100%;
}body {
margin: 0;
padding: 0;
font-family: « Roboto », sans-serif;
}* {
border: 0 solid #888;
}a {
color: #666;
}

a:hover {
color: #fff;
background-color: #333;
text-decoration: none;
}

h1,
h2,
h3,
h4 {
margin: 0;
}

#enveloppe {
background-color: #666;
margin: 0 auto;
}

.article-en-une::before,
#entete-page::before,
#navigation-principale::before,
#annexes-page::before,
#enveloppe::before {
content: «  »;
display: table;
}

.article-en-une::after,
#entete-page::after,
#navigation-principale::after,
#annexes-page::after,
#enveloppe::after {
content: «  »;
display: table;
clear: both;
}

#entete-page,
#pied-page,
.article-en-une,
.module-page,
#annexes-page {
padding: 1rem;
}

#entete-page,
#pied-page {
color: white;
background-color: #000;
}

#entete-page hgroup::after {
display: block;
content: « Styles communs sans responsive »;
font-size: 12px;
}

#navigation-principale {
background-color: #aaa;
}

#entete-page h1 a,
#navigation-principale a {
text-decoration: none;
color: inherit;
}

#navigation-principale ul {
background-color: #555;
list-style: none;
padding: 0;
margin: 0;
}

#navigation-principale > ul li:nth-child(2n) {
background-color: #ccc;
}

#navigation-principale > ul li:nth-child(2n + 1) {
background-color: #999;
}

#navigation-principale a {
display: block;
padding: 1rem;
}

#navigation-principale a:hover {
color: white;
background-color: #333;
}

main {
background-color: #fff;
}

.entete-article {
color: black;
background-color: #ddd;
padding: .2rem .4rem;
}

.entete-article h1 {
margin: 0;
font-size: 3em;
}

.entete-article h2 {
margin: 0;
font-weight: 400;
font-size: 2em;
}

#annexes-page {
background-color: #bbb;
}

.module-page {
background-color: #ddd;
}

.module-page:nth-of-type(even) {
background-color: #eee;
}

.titre-module {
font-weight: bold;
border-bottom: 3px solid #333;
}

.titre-module {
margin: 0;
padding: .2rem;
color: white;
background-color: #333;
}

.pied-page * {
margin: 0;
}

Le code « responsive-01.css » :

#entete-page h1,
#entete-page h2 {
display: inline;
font-size: 1rem;
}#entete-page h2 {
font-weight: normal;
}#entete-page h2::before {
content:  » | « ;
}#entete-page hgroup::after {
content: « Styles mobile-first – largeur<768px »;
}/*
#navigation-principale::before {
content: « \2261″;
display: block;
padding: .4rem 1rem;
text-align: right;
color: white;
font-size: 32px;
}#navigation-principale ul {
display: none;
}#navigation-principale:hover ul {
display: block;
}
*/#navigation-principale,
#case-a-cocher-01 {
display: none;
}:checked + #navigation-principale {
display: block;
}label[for= »case-a-cocher-01″] {
display: block;
padding: .4rem 1rem;
text-align: right;
color: white;
font-size: 32px;
}label[for= »case-a-cocher-01 »]::after {
content: « \2261 »;
}@media screen and (min-width: 768px) {
#entete-page h1,
#entete-page h2 {
display: block;
font-size: 1rem;
}

#entete-page h2::before {
content: «  »;
}

#entete-page hgroup::after {
content: « Styles mobile-first – largeur >=768px et <992px »;
}

#navigation-principale::before {
content: none;
}

#navigation-principale ul {
display: block;
}

#navigation-principale ul li {
float: left;
}

.annexe-article {
float: left;
width: 33.333%;
}

.module-page {
float: left;
width: 50%;
}

}

@media screen and (min-width:992px) {
#entete-page hgroup::after {
content: « Styles mobile-first – largeur >= 992px »;
}

main {
float: right;
width: 75%;
}

#annexes-page {
float: left;
width: 25%;
}

.module-page {
float: none;
width: auto;
}

#pied-page {
clear: both;
}

}

Ci-dessous, les trois affichages avec l’application des media queries.

Le premier est l’affichage par défaut pour affichage sur écran mobile :

 

Ci-dessous, avec l’application du media queries pour affichage sur écran tablette [ @media screen and (min-width: 768px) ] :

 

Ci-dessous, avec l’application du media queries pour affichage sur écran PC [ @media screen and (min-width:992px) ] :