Responsive Design
Adapter ton interface à tous les écrans.
Imagine : tu viens de finir l'interface de ton jeu sur ton grand écran de PC. Tout est parfait. Maintenant, tu lances le jeu sur ta tablette, puis sur ton téléphone. Catastrophe ! Tout est minuscule.
Le responsive design, c'est l'ensemble des techniques CSS qui permettent à ton site de se réorganiser intelligemment pour être utilisable sur n'importe quelle taille d'écran.
10.1 Le point de départ : La balise viewport
Sans cette balise <meta> dans le <head>, les mobiles afficheront une version miniature de ton site.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>10.2 Les Media Queries
C'est une condition en CSS : "SI l'écran fait cette taille, ALORS applique ce style."
.element {
background-color: #26c6da;
}
/* SI la largeur de l'écran est de 768px OU MOINS... */
@media (max-width: 768px) {
.element {
background-color: #f87171; /* ...il devient rouge. */
}
}10.3 La stratégie : Mobile-First
On écrit d'abord le CSS pour le mobile, puis on utilise des media queries avec min-width pour adapter le design aux écrans plus grands.
Carte Responsive
Redimensionne ta fenêtre : je suis en colonne sur mobile, et côte à côte sur PC !
/* === STYLE MOBILE PAR DÉFAUT === */
.responsive-card {
/* En colonne par défaut */
}
/* === STYLE POUR ÉCRANS PLUS GRANDS === */
@media (min-width: 768px) {
.responsive-card {
/* On passe en flex row */
display: flex;
align-items: center;
}
}