Mobile ou desktop First

L'approche mobile-first et l'approche desktop-first sont deux méthodologies opposées pour concevoir des sites web responsives. Leur différence repose principalement sur l’ordre dans lequel les styles sont appliqués en fonction des tailles d’écran.

Déclarations CSS pour Mobile-first

En mobile-first, les styles de base sont écrits pour les petits écrans, et les media queries enrichissent les styles pour les écrans moyens et larges.

/* Styles par défaut : petits écrans */
body {
    background-color: #f3f; /* Couleur par défaut (petits écrans) */
}

/* Écrans moyens : à partir de 768px */
@media (min-width: 768px) {
    body {
        background-color: #999; /* Couleur adaptée aux écrans moyens */
    }
}

/* Écrans larges : à partir de 1024px */
@media (min-width: 1024px) {
    body {
        background-color: orange; /* Couleur pour les grands écrans */
    }
}

Sur codePen

CSS Le code complet à tester se trouve sur CodePen

Déclarations CSS pour Desktop-first

En desktop-first, les styles de base sont écrits pour les grands écrans, et les media queries adaptent les styles pour les écrans moyens et petits.

/* Styles par défaut : grands écrans */
body {
    background-color: orange; /* Couleur par défaut (grand écran) */
}

/* Écrans moyens : jusqu'à 1024px */
@media (max-width: 1024px) {
    body {
        background-color: #999; /* Couleur adaptée aux écrans moyens */
    }
}

/* Petits écrans : jusqu'à 768px */
@media (max-width: 768px) {
    body {
        background-color: #f3f; /* Couleur adaptée aux petits écrans */
    }
}

Sur codePen

CSS Le code complet à tester se trouve sur CodePen

Résumé des différences :

Mobile-first :

Styles de base = mobiles (écrans petits). Media queries avec min-width pour enrichir à partir d'une certaine taille.

Desktop-first :

Styles de base = desktops (écrans grands). Media queries avec max-width pour réduire les styles sous une certaine taille.