5 conseils utiles pour créer des mises en page réactives

Imaginez que vous avez fait tout le travail nécessaire pour créer une mise en page vraiment cool. Mais ensuite, lorsque vous réduisez un peu la fenêtre de votre navigateur, vous trouvez quelque chose qui déborde. Vous lancez une requête multimédia pour résoudre le problème. Mais en redimensionnant la fenêtre, vous remarquez que quelque chose d'autre s'est cassé.

C'est quelque chose que la plupart des développeurs CSS connaîtront à un moment donné. Mais heureusement, nous avons plusieurs solutions CSS modernes qui facilitent grandement le développement de choses et leur bon fonctionnement. Cet article explore 5 pratiques utiles à garder à l'esprit lors du développement de sites Web. Ces conseils vous aideront à éviter les ruptures gênantes dans votre conception.

1. Commencez avec une feuille de style globale

Commencez toujours par un style global lors de l'écriture de CSS. Ne vous souciez pas de la mise en page. Au lieu de cela, définissez des styles génériques tels que la typographie, les couleurs et les arrière-plans. Réinitialisez les marges, supprimez les soulignements des liens, etc.

Une fois que vous avez terminé avec le style général, vous pouvez commencer à créer la mise en page et à cibler des éléments individuels dans la mise en page. Fondamentalement, commencez par le haut, puis déplacez-vous sur les éléments.

L'exemple CSS suivant réinitialise la marge de tous les éléments à 0, définit la typographie et la couleur de tous les principaux titres et leur ajoute une marge cohérente :

corps,
h1,
h2,
h3,
p {
marge: 0;
}
h1,
h2,
h3 {
couleur: bleu;
famille de polices: "Verdana" sans empattement;
poids de la police: 900;
hauteur de la ligne: 1;
}
h2,
h3,
p {
marge inférieure: 1rem;
}

Maintenant que tous les styles de base sont définis, vous pouvez créer à partir de là. Par exemple, vous pouvez ajouter un rembourrage à l'élément conteneur. Cela éloignera le contenu des bords de votre navigateur. Ensuite, vous pouvez appliquer un largeur maximale aux images, afin qu'ils puissent s'adapter à la largeur de leur conteneur. Il s'agit de partir des éléments généraux avant de cibler des éléments spécifiques.

Encore une fois, la mise en page sera responsive. Ainsi, lorsque vous modifiez la taille de l'écran, la taille des éléments change en conséquence. En tant que développeur, vous devez être conscient de ces trucs et astuces CSS car ils peuvent faire passer votre productivité à un niveau supérieur.

2. Évitez les tailles fixes

Lorsque vous commencez à penser aux mises en page, la toute première chose que vous devez garder à l'esprit est d'éviter les tailles fixes. Les tailles fixes font référence à des propriétés telles que largeur: 1000px, hauteur: 200px, et ainsi de suite. Définir une hauteur ou une largeur fixe ne vous causera que des problèmes à long terme.

Utilisez plutôt des hauteurs et des largeurs adaptables. Une façon consiste à utiliser hauteur min et largeur min au lieu de hauteur et largeur. Par exemple, supposons que vous définissiez la largeur d'un élément sur 600px. Lorsque vous passez à moins de 600 px, le contenu déborde :

Au lieu de cela, vous devez modifier la propriété de largeur pour largeur maximale. Avec largeur maximale, l'élément sera autorisé à se rétrécir à mesure que la fenêtre du navigateur se rétrécit. Et si la fenêtre devient large, le texte reprendra sa longueur d'origine. Voici le résultat :

C'est pareil pour hauteur. Par exemple, supposons que vous définissiez le hauteur d'un en-tête à une valeur fixe de 200px.

entête {
hauteur: 200pixels;
afficher: grille;
lieu-articles: centre;
}

Cela centre parfaitement tout dans l'en-tête. Mais lorsque vous réduisez la fenêtre du navigateur, le contenu finira par sortir de son conteneur. Et c'est parce que vous définissez une hauteur fixe sur l'en-tête.

En général, hauteur et largeur sont deux propriétés dangereuses. La solution consiste à utiliser la hauteur et les largeurs adaptables, c'est-à-dire min- et hauteur maximum, et min- et largeur maximale. Dans ces cas, si le navigateur se heurte à des situations où le contenu s'allonge, l'en-tête grandira pour s'adapter à cela.

C'est l'un des les erreurs CSS les plus courantes que vous devriez éviter.

3. N'oubliez pas que votre site Web est réactif par défaut

Gardez à l'esprit que votre site Web est réactif avant même que vous n'écriviez une seule ligne de code CSS. Cet état d'esprit peut vous aider à éviter de trop compliquer le processus de conception. La disposition va fonctionner sur des écrans massifs et des écrans minuscules. Ce n'est peut-être pas joli. Il pourrait même être difficile à lire sur de grands écrans. Mais le site Web s'adapte à la fenêtre d'affichage, quelle que soit sa taille.

Bien sûr, les images peuvent déborder et le texte peut être trop petit. Mais vous ne perdrez rien avec la mise en page par défaut. Votre texte ne se cassera pas et tous les éléments seront visibles à l'écran.

Comprendre et accepter ce fait peut vraiment vous aider lorsque vous écrivez votre code CSS. Lorsque vous rencontrez des problèmes, vous serez sûr que l'erreur provient du CSS que vous avez écrit. Cela permet de trouver plus facilement le problème et de le résoudre.

Essayez d'utiliser les media queries uniquement pour ajouter de la complexité. Par exemple, lorsque vous souhaitez que votre mise en page ait trois colonnes sur des écrans plus grands. Sinon, ne les utilisez pas. Pour une analyse approfondie des requêtes des médias, lisez notre guide des requêtes médias.

Voici un scénario. Imaginez que l'élément avec un nom de classe .diviser contient trois éléments. Avec le CSS suivant, une mise en page à trois colonnes sera créée :

.diviser {
afficher: fléchir;
flex-direction: ligne;
écart: 2rem;
}

Dans les petits écrans (40em large ou moins), vous voudriez que tout occupe une seule colonne. Donc tu ferais ça :

@médias(largeur maximale: 40em) {
.diviser {
afficher: bloc;
 }
}

Ici, vous remplacez l'alignement par défaut (trois colonnes). Mais la requête média n'est pas nécessaire car le navigateur utilise bloc de visualisation par défaut. Vous n'avez donc pas à le définir explicitement.

Dans cet esprit, vous pouvez refactoriser votre code pour utiliser une seule requête multimédia qui ne s'applique qu'aux grands écrans. Là, vous passerez à trois colonnes lorsque l'écran est plus large que 40em :

@médias(largeur maximale: 40em) {
.diviser {
afficher: fléchir;
flex-direction: ligne;
écart: 2rem;
 }
}

Sur les petits écrans, le navigateur empile tout dans une seule colonne. Mais vous n'êtes pas obligé de le spécifier car le navigateur utilise bloc de visualisation par défaut. Ainsi, vous n'avez utilisé que des media queries pour ajouter de la complexité.

Ainsi, au lieu d'ajouter de la complexité et de devoir remplacer un tas de propriétés, vous ajoutez maintenant la complexité lorsque vous en avez besoin. La plupart du temps, vous n'aurez besoin que largeur min demandes des médias. Commencez par le mobile d'abord, puis lorsque le site a fière allure sur mobile, ajoutez la complexité (par exemple, les colonnes) pour la version de bureau.

5. Profitez du CSS moderne

En utilisant des approches CSS modernes, vous pouvez vous éloigner de la plupart des problèmes d'alignement et des points d'arrêt et vous diriger vers la réalisation d'une conception intrinsèque.

Une façon de procéder est la suivante :

h1 { taille de police: pince (3rem, 1rem + 10vw, 7rem)}

Cela serre le h1 entre une taille de police minimale et maximale. Le plus petit auquel nous voulons qu'il aille est 3rem et le plus élevé est 7rem. Le milieu est ce que nous allons parcourir (1 rem + 10 vw). En conséquence, le titre se rétrécit automatiquement à mesure que la fenêtre d'affichage devient plus petite et grandit à mesure qu'elle s'agrandit.

En savoir plus sur le CSS moderne

Le CSS a beaucoup évolué au fil des années. Aujourd'hui, nous avons des approches plus récentes et meilleures pour positionner les éléments en CSS. Dans cet article, nous avons abordé certaines de ces pratiques et souligné comment elles peuvent vous aider à éviter les pièges de conception courants. L'une des meilleures façons d'apprendre le CSS moderne consiste à utiliser une approche pratique, comme l'utilisation du CSS moderne pour concevoir un tableau HTML.