breakpoint > grid responsive (mf)

Benjamin Derepas
Les bases HTML/CSS

Bonjour à toute la communauté Grafikart .

Je viens vous poser une petite question qui me perturbe depuis que j'ai repris le web après plusieurs mois d'absence .
Les technologies ont évoluées, et certainement les "conventions" de codage aussi, et plus particulièrement au niveau du responsive .

Lorsque je créer une grid responsive en mobile first, comme d'habitude je créer mes classes par défaut pour le mobile puis j'ajoute des regles suivant la résolution de l'écran. (en passant par min-width bien sur )

Mais quels sont les breakpoints les plus utilisés ? On m'a déjà parlé de framework front-end avec une dizaine de breakpoints différents, je trouve cela un peu énorme.
Peut on , avec 2 ou 3 valeurs cibler +/- 90% des périphériques à l'heure actuelle ? Si oui, pourriez vous me les indiquer svp ?
Cela m'éviterai de suivre cet exemple

Cordialement

3 réponses

Niramar

Ah ben tien je bossais justement dessus je te poste mon less

 // //
 /////  Gestion des medias queries
// //   

  ////
 //     Tailles min et max des devices
////

    @desktop-xl-min:    (@desktop-l-max + .01);
    @desktop-l-max:     1600px;
    @desktop-l-min:     (@desktop-max + .01);
    @desktop-max:       1128px;
    @desktop-min:       (@tablet-max + .01);
    @tablet-max:        949px;
    @tablet-min:        (@mobile-max + .01);
    @mobile-max:        529px;

  ////
 //     Medias queries
////

    @mediasize:         ~"desktop";
    @highdensity:       ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
                        ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
                        ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
                        ~"only screen and (min-device-pixel-ratio: 1.5)";
    @desktop-xl:        ~"only screen and (min-width: @{desktop-xl-min})";
    @desktop-l-plus:    ~"only screen and (min-width: @{desktop-l-min})";
    @desktop-l:         ~"only screen and (min-width: @{desktop-l-min}) and (max-width: @{desktop-l-max})";
    @desktop-l-minus:   ~"only screen and (max-width: @{desktop-l-max})";
    @desktop-plus:      ~"only screen and (min-width: @{desktop-min})";
    @desktop:           ~"only screen and (min-width: @{desktop-min}) and (max-width: @{desktop-max})";
    @desktop-minus:     ~"only screen and (max-width: @{desktop-max})";
    @tablet-plus:       ~"only screen and (min-width: @{tablet-min})";
    @tablet:            ~"only screen and (min-width: @{tablet-min}) and (max-width: @{tablet-max})";
    @tablet-minus:      ~"only screen and (max-width: @{tablet-max})";
    @mobile:            ~"only screen and (max-width: @{mobile-max})";

Si ça peu t'aider ça permet de placer tes medias query rapidement sans te poser de question et si tu bosses sous less regarde dans les sujets de ce fofo section HTML/CSS j'ai posté ma grille flexible mêmes si tu ne reprends pas le code ca poura toujour t'inspirer.

@media @mobile, @tablet {
}
Benjamin Derepas
Auteur

Merci de ta réponse , je pense avoir trouvé une solution plutôt pratique :

  • 2 breakpoint : min-width 36em et 64em.
  • En gros tous ce qui est en dessous de 64em prend 100% de la largeur (tablette landscape entre autre) et quand on les dépasse, on met une taille au containeur de 1200px .
Niramar

J'ai une config en 1920 comme la plupart des personne maintenant ma question c'est:
Je fais quoi des 720px qui reste vide sur mon écran?
Et ma réponse est un compromis sur les break point avec du 1600 pour coller à toute les définitions actuel et je ne pense pas encore à la 4k qui arrive doucement...