Principales techniques pour créer des mises en page réactives afin que vous n'ayez pas à vous fier à des frameworks CSS lourds

Vous n'avez pas besoin de frameworks CSS lourds pour créer des mises en page réactives.

Les frameworks CSS comme Tailwind et Bootstrap sont vraiment puissants, mais parfois, ils sont trop lourds pour les petits sites Web. Vous pouvez obtenir toutes les fonctionnalités qu’ils offrent en code CSS pur. Sous le capot, ils utilisent tous la même technique de base pour les sites Web réactifs.

En fait, si vous voulez vraiment savoir comment fonctionnent ces frameworks et sites Web réactifs, alors vous devez comprendre les 5 techniques fondamentales.

Voici les 5 techniques pour rendre votre site web responsive :

Technique n°1 : configurer la fenêtre

Saviez-vous qu'une seule balise méta peut contrôler la façon dont votre site Web évolue sur n'importe quelle taille d'écran ?

Oui, cette balise méta est Viewport.

Si vous ne savez pas ce qu'est la Viewport, alors Viewport est la zone visible sur une page Web sur un appareil, qu'il s'agisse d'un téléphone, d'une tablette ou d'un ordinateur de bureau. Vous pouvez demander ce que cela fait. Il détermine la manière dont le contenu est mis à l'échelle et affiché en fonction de la taille de l'écran de l'appareil.

Étant donné que les écrans sont disponibles en différentes tailles, la fenêtre d'affichage joue un rôle crucial dans la réactivité du site Web.

Maintenant, comment l'utiliser ?

Utilisez simplement la balise méta Viewport dans votre fichier HTML.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Technique n°2 : Adopter une approche axée sur le mobile

Si vous ne concevez pas le mobile d'abord, vous vous trompez.

Parce que plus de la moitié du trafic Web provient aujourd'hui d'appareils mobiles. Et c’est l’approche adoptée par Tailwind. Et ils vous demandent de faire de même. Ici, nous parlons d'utiliser du CSS pur au lieu d'un framework, mais l'approche est toujours la même.

L'approche mobile-First est utile à long terme, car vous devrez écrire plusieurs versions du même code pour différents types d'appareils.

Technique n°3 : utiliser CSS Grid et Flexbox

Utilisez-vous toujours la mise en page basée sur Float pour votre site Web ?

J'espère que ce n'est pas le cas. Et si vous l'utilisez toujours, alors il est temps de passer à Flexbox et CSS Grid car ce sont des outils puissants pour créer des mises en page flexibles.

Lorsque vous avez besoin de créer une mise en page unidimensionnelle, optez pour Flexbox

Et lorsque vous avez besoin de créer une mise en page en deux dimensions, optez pour Grid

Technique n°4 : créer des mises en page fluides

Utilisez-vous des valeurs de pixels fixes partout sur votre site Web ?

La plupart des développeurs choisissent d'utiliser la valeur pixel(px) lors du développement des différentes dispositions à l'écran. Les valeurs de pixels sont idéales pour les mises en page fixes, mais pas pour les mises en page réactives. Si vous utilisez une mise en page fluide comme une valeur basée sur un pourcentage, votre mise en page se redimensionnera en douceur sur n'importe quelle taille de fenêtre.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Technique n°5 : utiliser judicieusement les requêtes multimédias

Les requêtes multimédias sont une autre technique utile pour créer des mises en page réactives

Mais il faut l’utiliser à bon escient. Il utilise différents points d'arrêt pour différentes mises en page. La plupart des développeurs se trompent. Ils commencent à créer pour toutes les tailles d'écran possibles, ce qui conduit à un code ingérable.

Dans ma suggestion, les requêtes multimédias devraient être effectuées sur les transitions clés entre les catégories d'appareils. Par ex. Mobile vers tablette, tablette vers ordinateur de bureau.

~

Très bien, comme vous pouvez le constater, il existe plusieurs techniques disponibles pour rendre votre site Web réactif. Sur le papier, il semble que 5 techniques différentes soient prêtes à être utilisées, mais en pratique, lorsque vous commencerez à travailler sur un site Web de production, vous commencerez à voir le cas d'utilisation de toutes ces techniques.

Maintenant, allez créer un site réactif et dites-moi ce que vous avez utilisé au mieux.

Si vous avez aimé lire ceci, suivez-moi sur Twitter/X pour en savoir plus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!