Exercice 1 : Adaptation basique
Créez une carte de visite qui s'adapte selon la taille de l'écran :
-
Sur desktop : largeur de 400px, centrée, fond blanc, bordure noire de
2px, padding de 20px.
-
Sur mobile (max-width: 600px) : largeur à 90% de l'écran, taille de
police du nom augmentée, fond bleu clair.
-
Sur tablette (entre 601px et 900px) : largeur à 70% de l'écran,
bordure verte.
Indice : Utilisez @media avec
max-width et min-width.
<style>
/* Styles par défaut pour desktop */
.business-card {
width: 400px;
margin: 0 auto;
background-color: white;
border: 2px solid black;
padding: 20px;
}
/* Votre code CSS pour les media queries ici */
</style>
<div class="business-card">
<h2>Jean Dupont</h2>
<p>Développeur Web</p>
<p>Email: jean.dupont@example.com</p>
<p>Téléphone: 0123456789</p>
</div>
Jean Dupont
Développeur Web
Email: jean.dupont@example.com
Téléphone: 0123456789
Corrigé :
<style>
.business-card {
width: 400px;
margin: 0 auto;
background-color: white;
border: 2px solid black;
padding: 20px;
}
@media (max-width: 600px) {
.business-card {
width: 90%;
font-size: 18px;
background-color: lightblue;
}
}
@media (min-width: 601px) and (max-width: 900px) {
.business-card {
width: 70%;
border-color: green;
}
}
</style>
Explication : Les media queries permettent
d'appliquer des styles spécifiques selon la largeur de l'écran.
Exercice 2 : Galerie responsive
Créez une galerie d'images qui s'adapte selon la taille de l'écran :
- Écrans larges (min-width: 1024px) : 3 colonnes.
- Tablettes (entre 768px et 1023px) : 2 colonnes.
- Smartphones en mode portrait (max-width: 767px) : 1 colonne.
Indice : Utilisez flex-basis ou
grid-template-columns dans vos media queries.
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery img {
width: 100%;
height: auto;
}
/* Votre code CSS pour les media queries ici */
</style>
<div class="gallery">
<img src="https://picsum.photos/id/10/200/300" alt="Image 1">
<img src="https://picsum.photos/id/20/200/300" alt="Image 2">
<img src="https://picsum.photos/id/30/200/300" alt="Image 3">
<img src="https://picsum.photos/id/40/200/300" alt="Image 4">
<img src="https://picsum.photos/id/50/200/300" alt="Image 5">
<img src="https://picsum.photos/id/60/200/300" alt="Image 6">
</div>
Corrigé :
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery img {
width: 100%;
height: auto;
}
@media (min-width: 1024px) {
.gallery img {
flex: 0 0 calc(33.33% - 10px);
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.gallery img {
flex: 0 0 calc(50% - 10px);
}
}
@media (max-width: 767px) and (orientation: portrait) {
.gallery img {
flex: 0 0 100%;
}
}
</style>
Explication : Les media queries permettent de
modifier la disposition des éléments en fonction de la taille de
l'écran et de son orientation.
Exercice 3 : Menu responsive
Créez un menu qui passe en mode "hamburger" sur mobile :
- Sur desktop : menu horizontal.
-
Sur mobile (max-width: 767px) : menu vertical masqué par défaut, icône
"hamburger" pour l'ouvrir.
Indice : Utilisez display: none et
display: block dans vos media queries.
<style>
/* Styles par défaut pour desktop */
.menu {
display: flex;
list-style: none;
padding: 0;
}
.menu li {
margin: 0 10px;
}
.hamburger {
display: none;
}
/* Votre code CSS pour les media queries ici */
</style>
<div class="hamburger">☰</div>
<ul class="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
Corrigé :
<style>
.menu {
display: flex;
list-style: none;
padding: 0;
}
.menu li {
margin: 0 10px;
}
.hamburger {
display: none;
}
@media (max-width: 767px) {
.menu {
display: none;
flex-direction: column;
}
.menu.active {
display: flex;
}
.hamburger {
display: block;
cursor: pointer;
}
}
</style>
Explication : Les media queries permettent de masquer
ou afficher des éléments selon la taille de l'écran.