Introduction à la mise en page pour différents écrans en CSS

Dans le monde moderne, un site web doit s'afficher correctement sur des appareils avec des tailles d'écran variées.

Généralement, les appareils sont classés en quatre catégories : les ordinateurs de bureau (desktop), les ordinateurs portables, les tablettes (tablet) et les téléphones (mobile).

Autrefois, dans des temps anciens, les tailles d'écran populaires de tous les appareils étaient connues, heureusement il n'y en avait pas tant que ça. Et les sites étaient conçus pour qu'ils s'affichent correctement sur une liste connue de résolutions.

Actuellement, le nombre d'appareils a tellement augmenté qu'il est impossible d'établir une liste de résolutions sous lesquelles le site doit être conçu. Aujourd'hui, on considère que la mise en page doit s'afficher correctement sur un écran de n'importe quelle taille.

Ceci est atteint en recombinant les blocs aux points de rupture (breakpoints) de la maquette. De plus, ces points de rupture sont choisis non pas pour des appareils spécifiques, mais pour le contenu du site - de manière à ce qu'il ait une belle apparence.

Entre les points de rupture, la largeur des éléments du site doit être fluide, afin qu'elle s'adapte à la largeur de l'écran. Et aux points de rupture, il se produit une recombination des blocs dans d'autres positions.

La mise en page décrite est appelée adaptative ou responsive (responsive). C'est son étude que nous aborderons dans les prochaines leçons.