Cet article montre les étapes pour créer une conception de site Web réactif en HTML et CSS en utilisant :
- Balise Meta de la fenêtre d'affichage
- Images réactives
- Disposition de la boîte flexible
- Disposition de la grille
- Requêtes multimédias
Comment créer un design de site Web réactif avec HTML et CSS ?
Créer une conception de site Web réactif avec HTML et CSS implique de créer une mise en page qui s'adapte à différentes tailles et résolutions d'écran. Voici les étapes que vous pouvez suivre pour créer un design de site Web réactif :
Étape 1 : Balise Meta Viewport
Le ' fenêtre La balise meta joue un rôle essentiel dans la création d'un design Web réactif. Il est inséré à l'intérieur du '
< méta nom = 'fenêtre' contenu = 'width=device-width,initial-scale=1' / >
La balise Meta ci-dessus a deux attributs :
- Le ' nom ” L'attribut indique le nom de la fonctionnalité pour laquelle cette balise est créée/utilisée. Par exemple, en définissant le ' fenêtre ' au ' nom ” attribut pour gérer la fenêtre d'affichage de différents appareils.
- Le ' contenu ” L'attribut définit la valeur de l'attribut précédent. Il définit la largeur de chaque appareil et redimensionne le document/la page Web à 100 %.
Étape 2 : Images réactives
Comme la taille de l'image varie les unes des autres, il est donc difficile de définir le même ' hauteur ' ou ' largeur ” propriété pour chaque image. Lorsque la taille de l'image est fixe, les utilisateurs ne redimensionnent pas l'image de la page Web avec l'écran. Cependant, les utilisateurs peuvent définir l'image responsive via le code suivant :
image {
max- largeur : 100 % ;
}
Le ' largeur maximale ” La propriété CSS empêche l'affichage de l'image à l'intérieur de son espace alloué. En définissant la valeur en '%', l'image se redimensionne avec le redimensionnement de son élément parent. Cela crée un effet réactif pour l'image.
Étape 3 : Mise en page Flexbox
La mise en page Flexbox est fortement recommandée pour créer une conception de site Web réactif. Il permet aux éléments HTML de s'afficher à une certaine position et de redimensionner l'espace disponible pour chaque enfant en fonction de la taille disponible par le div parent. La mise en page Flexbox contient plusieurs propriétés qui offrent une grande liberté au développeur, comme dans le code ci-dessous :
< style >
.parent {
affichage : flexible ;
}
.enfant {
fléchir: 1 ;
texte- aligner : centre;
}
< / style >
< corps >
< div classe = 'parent' >
< div classe = 'enfant' style = 'bordure : bleu-violet uni de 3 pixels ;' >Bienvenue< / div >
< div classe = 'enfant' style = 'bordure : 3px solide vert foncé ;' >à< / div >
< div classe = 'enfant' style = 'bordure : 3 pixels rouge uni ;' >Linuxint< / div >
< / div >
< / corps >
Dans l'extrait de code ci-dessus :
- Tout d'abord, créez un élément div parent avec un identifiant de ' parent ' à l'intérieur de '
' étiqueter. - Ensuite, créez plusieurs éléments div enfants et attribuez-leur une classe de ' enfant ”.
- Ensuite, sélectionnez le ' parent ” classe et donne la valeur de “ fléchir « pour le CSS » afficher ' propriété.
- Après cela, fournissez une valeur de ' 1 ' au ' fléchir « propriété à chacun » enfant ” classe qui fait que l'élément enfant s'affiche comme un flex.
Après avoir exécuté le code ci-dessus, la page Web ressemble à ceci :
La sortie ci-dessus indique que l'élément enfant obtient une largeur égale lorsque le navigateur est redimensionné.
Étape 4 : mise en page de la grille
La disposition de la grille crée une grille et affecte les éléments HTML à l'intérieur de la portion de grille. Les éléments de la grille changent en fonction de la taille de l'écran de la page Web. Il crée un design réactif lorsque la taille de l'élément HTML change en fonction de l'écran de l'appareil :
< style >.récipient {
affichage : grille ;
grille-modèle-colonnes : 1fr 1fr 1fr ;
}
< / style >
< corps >
< div classe = 'composant' >
< div style = 'bordure : 3 px solide vert forêt ;' >Linuxint< / div >
< div style = 'bordure : 3px solide vert foncé ;' >Linuxint< / div >
< div style = 'bordure : 3 pixels rouge uni ;' >Linuxint< / div >
< / div >
< / corps >
Dans le code ci-dessus :
- Tout d'abord, créez un div parent et attribuez-lui une classe de ' composant ' à l'intérieur de '
' étiqueter. Après cela, créez-y trois éléments div enfants. - Ensuite, dans le fichier CSS, attribuez un ' grille ' valeur à la ' afficher « propriété pour le » récipient ” div.
- Après cela, créez trois portions de taille égale sur la page Web en utilisant le ' grille-modèle-colonne ” propriété et mettez-la égale à “ 1fr 1fr 1fr ' où fr signifie ' fraction ”.
Après avoir compilé le code ci-dessus, la sortie ressemble à ceci :
La sortie affiche que les divs se redimensionnent en fonction de la taille de l'écran avec des proportions égales.
Étape 5 : Requêtes multimédias
L'utilisation de requêtes multimédias pour créer une conception réactive est une sorte de chose à l'ancienne, mais la plupart des sites Web utilisent néanmoins des requêtes multimédias. Les requêtes média peuvent être ajoutées directement dans le fichier CSS après avoir ajouté le style par défaut pour l'élément HTML sélectionné. La requête multimédia rend le code un peu plus long et désordonné. Parce que le développeur doit insérer le code pour chaque taille d'écran séparément.
Par exemple, voir l'extrait de code ci-dessous :
@ médias écran et ( min- largeur : 640px ) {.composant {
arrière-plan- couleur : forêt verte;
}
}
Dans l'extrait de code ci-dessus :
- Tout d'abord, définissez la requête multimédia qui applique les propriétés CSS à la classe d'éléments sélectionnée ' composant ' lorsque la largeur de la taille de l'écran devient supérieure à ' 640px ”.
- Ensuite, sélectionnez la 'classe de composant et définissez la valeur de' forêt verte ' pour le ' Couleur de l'arrière plan ' propriété.
.composant {
arrière-plan- couleur : bleu Dodger ;
}
}
Ensuite, pour l'extrait de code ci-dessus :
- Définissez la requête multimédia pour appliquer des styles lorsque la taille de la largeur est inférieure à ' 1000px ”.
- Maintenant, sélectionnez le ' composant ' classe et fournissez une valeur de ' Dodgerblue ' pour le ' Couleur de l'arrière plan ' propriété:
Après avoir exécuté les extraits de code ci-dessus, le résultat ressemble à ceci :
La sortie indique que la requête multimédia modifie l'arrière-plan en fonction de la taille de l'écran. La taille de police, la largeur, la hauteur et d'autres propriétés CSS peuvent également être appliquées en suivant le même modèle.
Les tailles d'écran des points d'arrêt possibles à prendre en compte lors de l'utilisation des requêtes multimédias sont :
- Pour ' petit ' taille de l'écran, définissez une largeur inférieure à ' 640px ”.
- Pour ' moyen ” taille de l'écran de la fenêtre d'affichage, la largeur est comprise entre “ 641px ' et ' 1007px ”.
- Pour ' grand ' taille de l'écran, réglez la largeur sur ' 1008px ' ou plus grand.
Conclusion
Pour créer une conception de site Web réactif, les développeurs doivent ajouter le ' fenêtre d'affichage