Un autre facteur qui conduit à se concentrer sur une conception réactive axée sur le mobile est que la plupart des gens accèdent à Internet via leurs appareils mobiles, soit 60 %. Alors que seulement 20 % de la population utilise Internet sur un ordinateur de bureau.
Cet article couvrira les instructions pour créer un design réactif adapté aux mobiles.
Comment configurer une conception réactive axée sur le mobile ?
Le design réactif, qu'il soit adapté aux mobiles ou aux écrans plus grands, peut être créé en suivant les méthodes indiquées ci-dessous :
- Créez un design réactif axé sur les mobiles.
- Utiliser/utiliser la requête multimédia pour développer/créer un design réactif pour les écrans plus grands.
Méthode 1 : créer une conception réactive axée sur le mobile
Tout d’abord, commencez par créer une approche de conception axée sur le mobile. À cette fin, suivez les instructions étape par étape fournies ci-dessous.
Étape 1 : Créer une structure HTML
Tout d’abord, créez une structure HTML et ajoutez un « Amorcer ' dans le
< ul >
< que >< un href = '#' > Maison < / un >< / que >
< que >< un href = '#' > À propos de nous < / un >< / que >
< que >< un href = '#' > Nos services < / un >< / que >
< que >< un href = '#' > Contactez-nous < / un >< / que >
< / ul >
< / non>
< / en-tête>
< h1 > Bienvenue sur Linux Astuce < / h1 >
< p > Un site de tutoriels. < / p >
< / rubrique>
< / principal>
< p > Linux Astuce Copyright < / p >
< / pied de page>
< / corps >
Étape 2 : Appliquer CSS
Dans la section corps, définissez le « famille de polices ' à ' sans-serif ». Définissez également le remplissage, la marge et la couleur d’arrière-plan. Après cela, appliquez CSS sur l'en-tête, le pied de page et la navigation :
corps {famille de polices : sans-serif ;
marge : 0 ;
rembourrage : 0 ;
Couleur de l'arrière plan : #808080 ;
}
entête {
Couleur de l'arrière plan : violet ;
couleur : blanc ;
rembourrage : 8px ;
}
navul {
type de style de liste : aucun ;
rembourrage : 0 ;
marge : 0 ;
}
leur navire {
marge : 4px 0 ;
}
nav ul li a {
couleur : blanc ;
décoration de texte : aucun ;
}
principal {
rembourrage : 18px ;
}
bas de page {
Couleur de l'arrière plan : rose ;
couleur : blanc ;
aligner le texte : centre ;
rembourrage : 8px ;
}
Comme on peut l'observer, le résultat ci-dessous a confirmé que la conception est adaptée aux mobiles :
Méthode 2 : utiliser les requêtes multimédias pour créer une conception réactive pour des écrans plus grands
La conception ci-dessus peut également être créée pour des écrans plus grands tels que les tablettes et les ordinateurs de bureau. À cette fin, les utilisateurs doivent inclure une requête multimédia dans le CSS. La largeur pour les tablettes est « 786px ' et pour les ordinateurs de bureau, c'est ' 1024px ».
Pour appliquer les requêtes multimédias, incluez d’abord le « @médias 'balise dans le fichier CSS. Après cela, spécifiez la propriété « min-width » comme « 768px ». Cela signifie que chaque fois que la taille d'écran minimale « 768 px » ou supérieure est atteinte, le CSS suivant s'appliquera :
@médias ( largeur minimale : 768px ) {corps {
taille de police : 14px ;
}
entête {
rembourrage : 18px ;
}
navul {
afficher : fléchir ;
}
leur navire {
marge : 0 8px ;
}
principal {
afficher : fléchir ;
justifier-contenu : l'espace entre ;
aligner les éléments : centre ;
}
bas de page {
rembourrage : 18px ;
}
}
Le résultat ci-dessous a démontré que la conception est également réactive sur des écrans plus grands :
Conclusion
Pour mettre en place une conception réactive adaptée aux mobiles, commencez par créer une structure HTML et ajoutez la fenêtre d'affichage. Après cela, liez le fichier CSS dans la balise head. Ensuite, appliquez CSS basé sur une conception réactive axée sur les mobiles. De plus, les utilisateurs peuvent ajouter la requête multimédia CSS à ajuster sur l'appareil mobile. Cet article a démontré une procédure détaillée pour mettre en place une conception réactive axée sur les mobiles.