Parcourir:170
Créer un site Web réactif est une compétence essentielle pour tout développeur front-end. Un site Web réactif ajuste sa mise en page et son contenu en fonction de l'appareil et de la taille de l'écran, garantissant ainsi une expérience utilisateur exceptionnelle sur tous les appareils. Dans cet article, nous vous guiderons tout au long du processus de création d'un site Web réactif de base à l'aide de HTML et CSS.
Avant de commencer, vous devez avoir une compréhension de base du HTML et du CSS. La connaissance de CSS Flexbox et des requêtes multimédias sera également bénéfique.
Commencez par créer un nouveau dossier de projet et ajoutez les fichiers suivants :
Ouvrez index.html et ajoutez la structure HTML de base que vous souhaitez, cela peut être n'importe quoi :
Responsive Website
My Responsive Website
Welcome to My Website
This is a simple responsive website built with HTML and CSS.
About Us
We provide excellent web development services.
Our Services
We offer a wide range of web development services.
Contact Us
Feel free to reach out to us for any inquiries.
Ensuite, ouvrez le fichier styles.css et commencez par ajouter quelques styles de base :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background: #333;
color: #fff;
padding: 1rem 0;
}
header h1 {
text-align: center;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
}
nav ul li {
margin: 0 1rem;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 2rem;
}
section {
margin-bottom: 2rem;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 1rem 0;
position: fixed;
width: 100%;
bottom: 0;
}
Pour rendre le site Web réactif, nous utiliserons des requêtes multimédias. Ceux-ci nous permettent d'appliquer différents styles en fonction de la taille de l'écran. Ajoutez les requêtes multimédias suivantes à styles.css :
@media (max-width: 768px) {
nav ul {
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 0.5rem 0;
}
main {
padding: 1rem;
}
}
@media (max-width: 480px) {
header h1 {
font-size: 1.5rem;
}
nav ul li {
margin: 0.25rem 0;
}
main {
padding: 0.5rem;
}
}
Ouvrez index.html dans un navigateur Web et redimensionnez la fenêtre du navigateur pour voir comment la mise en page s'adapte aux différentes tailles d'écran. Vous devriez voir le menu de navigation s'empiler verticalement et le remplissage autour du contenu diminuer à mesure que la largeur de l'écran diminue.
Vous avez maintenant créé un site Web réactif simple en utilisant HTML et CSS ! Cet exemple couvre les bases de la structuration d'une page Web et de l'utilisation de requêtes multimédias pour créer un design réactif. Au fur et à mesure que vous gagnez en expérience, vous pouvez explorer des techniques avancées telles que CSS Grid, Flexbox et des images réactives pour créer des mises en page plus complexes et dynamiques.
Restez à l'écoute!!!
Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.
Copyright© 2022 湘ICP备2022001581号-3