Le terme conception Web réactive correspond à la stratégie de création d'un site Web en fonction de l'appareil sur lequel il est affiché. Par exemple, vous pouvez faire modifier un site Web son comportement en fonction de la largeur de l'écran, de la résolution, de l'orientation, etc. Une conception Web réactive rend un site Web de nature dynamique.

Si vous rendez votre site Web réactif, il n'est pas nécessaire de développer le même site Web encore et encore pour chaque nouvel appareil qui émerge sur le marché. Le site Web changerait automatiquement son comportement en fonction du désir de l'utilisateur. Cette réactivité permettra au site Web de modifier son apparence lorsque l'utilisateur passe de l'utilisation du site Web sur un bureau vers un téléphone mobile.

Maintenant, nous savons ce qu'est un site Web réactif, la prochaine grande question est de savoir comment en générer un. Considérez la section suivante pour explorer la réponse à cette question.

Comment rendre votre conception Web réactive

Rendre un site Web réactif implique de rendre vos éléments tels que du texte, des images, etc. Ci-dessous, nous vous avons montré diverses entités qui rendent votre page Web réactive.

1. Fenêtre

La première et la première chose que vous devez inclure dans votre fichier de code source pour rendre votre page Web réactive est d'ajouter une balise de méta réactive.

Dans cette balise, la largeur est définie sur la largeur de l'appareil, ce qui signifie que la largeur de la page Web changera en correspondance avec la largeur de l'appareil, tandis que l'échelle initiale est définie sur 1, ce qui signifie lorsque la page Web est chargée par le navigateur Pour la première fois, le niveau de zoom sera 1. Cette balise commande essentiellement au navigateur pour ajuster les mesures d'une page Web selon diverses situations.

2. Requêtes médiatiques

CSS Media Queries vous permettez de modifier l'apparence de la structure Web en fonction du type d'appareil affichant le site Web tels que des ordinateurs de bureau, des téléphones, des ordinateurs portables, etc., et s'avérer utile pour concevoir des sites Web réactifs. De plus, ceux-ci peuvent être utilisés pour évaluer des choses telles que la hauteur et la largeur de l'appareil et de la fenêtre.

Ces requêtes utilisent certains points d'arrêt qui sont appelés les points sur lesquels la disposition d'un site Web modifie la taille de l'écran du type de périphérique.

Syntaxe

@media pas | unique type de média et (fonction multimédia et | ou | fonctionnement non média)

//Code;

Mots-clés expliqués

• pas: Il inverse la sémantique d'une requête médiatique.
• seul: Il empêche les anciennes versions d'un navigateur de mettre en œuvre la requête multimédia.
• et: Il combine un type de support avec une certaine fonctionnalité médiatique.

Explorons maintenant un exemple de la façon dont vous rendez votre page Web réactive à l'aide de requêtes multimédias.

Exemple
Ci-dessous, nous montrons une requête multimédia.

Html

Bonjour le monde!

Ici, nous avons défini un

élément et placé du texte à l'intérieur.

CSS

H1
Font-Family: «Times New Roman», Times, Serif;

Écran @Media et (Min-Width: 720px)
H1
Font-Family: Verdana, Genève, Tahoma, Sans-Serif;

Dans le code ci-dessus, la famille initiale de la famille du paragraphe est définie à Times New Roman, tandis que, après avoir appliqué la requête multimédia où nous avons spécifié que si la largeur de l'écran minimale est de 720px ou plus large, la famille de la police du paragraphe Changer pour Verdana. Redimensionnez votre fenêtre de navigateur pour voir l'effet de la requête multimédia.

Sortir
Lorsque le moindre largeur d'écran est de 720px ou plus large.

Lorsque la largeur d'écran minimale est inférieure à 720px.

La requête multimédia fonctionne correctement.

3. Flexion

CSS Flexbox est un modèle de mise en page qui permet un arrangement efficace et dynamique des éléments. Cette disposition est unidimensionnelle qui permet le placement des éléments à l'intérieur d'un conteneur avec un espace également distribué. Cette disposition rend les éléments réactifs, ce qui signifie que les éléments modifient leur comportement en fonction du type d'appareil qui les affichait. Il rend les éléments flexibles et leur fournit une position appropriée et une symétrie.

Un Flexbox se compose des composants suivants qui sont; un récipient flexible et un élément de flexion. Un conteneur flexion définit les propriétés de l'élément ancêtre en définissant son affichage sur flexion ou en ligne. Pendant ce temps, un élément Flex décrit les propriétés des éléments successeurs et il peut y avoir de nombreux éléments présents dans un conteneur flexible.

De plus, il existe un certain nombre de propriétés associées à un Flexbox qui aide à rendre une conception Web sensible. Ici, nous allons vous montrer comment vous pouvez utiliser un Flexbox pour rendre votre site Web réactif.

Exemple
Dans l'exemple ci-dessous, nous avons montré comment générer une grille d'image réactive à l'aide de Flexbox.

Html

Pour faire une grille d'image, nous faisons un élément div plus grand et niche deux éléments div à l'intérieur de cette div plus grande. Les deux éléments div nichés nichent trois images chacune.

CSS

.récipient
Affichage: flex;
wrap flex: enveloppement;
rembourrage: 5px;

La div avec la classe «conteneur» est affichée en tant que flex-box et a reçu un certain rembourrage. De plus, la propriété Flex-wrap se voient attribuer une valeur de pellicule qui signifie que si nécessaire, les images seront enveloppées à l'intérieur du conteneur.

CSS

.colonnes img
Largeur: 100%;

.Colonnes
Flex: 50%;
largeur maximale: 50%;
rembourrage: 5px;

Les images ont reçu une largeur à 100% afin qu'elles s'inscrivent de manière appropriée dans le conteneur, en outre en utilisant le flex et la largeur maximale, nous créons deux colonnes qui seront placées côte à côte.

CSS

@media (max-large: 600px)
.Colonnes
Flex: 100%;
largeur maximale: 100%;

Avec le Flexbox, nous utilisons également la requête multimédia. La requête multimédia ci-dessus spécifie que si la largeur est inférieure à celle spécifiée, le deux colonnes sera convertie en une.

Sortir
Échec de la fenêtre de votre navigateur de haut en bas pour voir l'effet.

Une grille d'image réactive a été créée.

4. Amorcer

Il s'agit d'un framework CSS qui permet à ses utilisateurs de créer des sites Web réactifs et avec une approche mobile axée sur les mobiles. Cette approche spécifie que la conception Web est d'abord développée pour les téléphones mobiles, puis pour d'autres appareils. Ici, nous allons montrer comment faire une barre de navigation qui est de nature réactive à l'aide de bootstrap.

Exemple
Nous utilisons la dernière version de Bootstrap, qui est Bootstrap 5 pour faire une barre de navigation.

Html

Tout d'abord à utiliser Bootstrap 5 incluez CDN pour CSS, et JavaScript dans votre fichier HTML comme nous l'avons montré ci-dessus.

Html

Dans le code ci-dessus, nous avons fait une barre de navigation en utilisant diverses classes bootstrap 5. Le .barre navale La classe est utilisée pour envelopper une barre de navigation avec .navbar-expand-sm classe pour l'effondrement réactif. En attendant le .bg-succès et .Navbar-Dark Les différents schémas de couleurs sont-ils fournis à la barre de navigation.

Le .récipient La classe enveloppe tous les éléments d'une barre de navigation avec une largeur fixe. En attendant, le .navbar-nav La classe est utilisée, créez une barre de navigation qui a une hauteur maximale et est légère et prend également en charge les listes déroulantes.

Le .Naval-Item, et .liaison de navigation sont utilisés pour créer divers éléments de liste dans la barre de navigation et le .actif La classe rend un lien actif.

Sortir

Une barre de navigation réactive a été générée avec succès.

Conclusion

La conception Web réactive correspond à la stratégie de création d'un site Web modifier son comportement en fonction de l'appareil sur lequel il est affiché. Si vous rendez votre site Web réactif, il n'est pas nécessaire de développer le même site Web encore et encore pour chaque nouvel appareil qui émerge sur le marché. Un tel site Web peut être développé en utilisant diverses entités telles que l'inclusion d'une balise Meta réactive dans votre fichier, en utilisant des requêtes multimédias, Flexbox ou Bootstrap. Ici, dans cet article, nous vous avons montré diverses techniques avec lesquelles vous pouvez rendre votre site Web réactif.