Breakpoints CSS 2026 : mobile, tablette et desktop
Choisir les bons breakpoints évite des dizaines de heures de retouches. Ce guide liste les largeurs les plus utilisées en 2026 et comment les tester visuellement avec notre simulateur.
Qu'est-ce qu'un breakpoint CSS ?
Un breakpoint est la largeur d'écran à partir de laquelle votre mise en page change — passage d'une colonne à deux, menu burger à menu horizontal, etc.
On les définit avec @media (min-width: …) ou max-width. Mobile-first = on part du petit écran et on enrichit ; desktop-first = l'inverse.
Un site lent ou mal structuré pénalise directement votre positionnement Google : nous visons un score Lighthouse mobile supérieur à 90 sur nos livraisons vitrine, landing et refonte.
Breakpoints recommandés en 2026
Notre outil inclut des puces rapides pour ces largeurs :
Le maillage interne compte autant que les mots-clés : reliez services, études de cas, articles de blog et pages villes pour concentrer l'autorité SEO vers vos pages qui convertissent.
GothamDev accompagne des artisans, PME et créateurs en Gard, Drôme, Ardèche, Vaucluse et à l'international — un seul interlocuteur du cadrage à la mise en ligne, avec 821 avis vérifiés sur LeGeekShop (4,87★).
- 320 px — anciens Android compacts, minimum absolu
- 375 px — iPhone SE, référence small mobile
- 390–414 px — iPhone 14/15/16, la majorité du trafic iOS
- 768 px — iPad portrait, tablettes
- 991 px — souvent navbar collapse Bootstrap
- 1024 px — iPad paysage, petits laptops
- 1280–1440 px — desktop standard
- 1920 px — Full HD, grands écrans
Exemple de media queries
Mobile-first typique : styles de base pour mobile, puis @media (min-width: 768px) { … } pour tablette, @media (min-width: 1024px) pour desktop.
Évitez 15 breakpoints : 3 à 4 suffisent pour la plupart des sites vitrines.
GothamDev accompagne des artisans, PME et créateurs en Gard, Drôme, Ardèche, Vaucluse et à l'international — un seul interlocuteur du cadrage à la mise en ligne, avec 821 avis vérifiés sur LeGeekShop (4,87★).
Tester chaque breakpoint visuellement
Ouvrez le test responsive GothamDev, cliquez sur les puces 320, 768, 1024 px ou choisissez « Breakpoints CSS » dans la sidebar.
Comparez deux breakpoints côte à côte avec « + Ajouter une vue » pour voir les ruptures de mise en page instantanément.
Un site lent ou mal structuré pénalise directement votre positionnement Google : nous visons un score Lighthouse mobile supérieur à 90 sur nos livraisons vitrine, landing et refonte.
5. Synthèse : plan d'action 30 jours
Appliquez ce guide par étapes — pas tout en même temps. Mesurez une métrique par semaine (trafic organique, appels, ventes, FPS serveur…) pour savoir ce qui fonctionne.
GothamDev peut prendre en charge tout ou partie de ce plan : audit initial gratuit, devis transparent et livrables testés avant mise en production.
- Semaine 1 : audit URLs, objectifs, benchmark concurrents locaux
- Semaine 2 : arborescence, wireframes, rédaction des textes clés
- Semaine 3 : développement, intégrations, tests mobile
- Semaine 4 : SEO technique, Search Console, mise en ligne + suivi 30 jours
Questions fréquentes
Faut-il cibler chaque modèle d'iPhone ?
Non — regroupez par fourchettes (375, 390, 414). Les différences sont minimes pour le layout.
Container max-width : quelle valeur ?
1140–1280 px est courant pour le contenu texte ; le hero peut être full-width.
GothamDev peut-il réaliser mon site vitrine ?
Oui — audit gratuit, devis transparent et livraison testée mobile. Décrivez votre projet via le formulaire ou WhatsApp.
Ce guide s'adresse-t-il aux TPE et artisans ?
Oui. La majorité de nos clients sont des structures locales ou en remote qui veulent un site crédible et des demandes de contact qualifiées.
Passer à l'action
Un site mal calibré sur mobile coûte des leads — nous auditons gratuitement.