Responsive Design
Adapter ton interface à tous les écrans.
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.
HTMLhtml
<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."
CSScss
.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
Image
Carte Responsive
Redimensionne ta fenêtre : je suis en colonne sur mobile, et côte à côte sur PC !
CSScss
/* === 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;
}
}