Home
css
design

Rendre son site web sensationnellement responsive !

responsive_css_design

Bienvenue dans l'univers du web, où chaque pixel compte et où le Responsive Design est ton meilleur allié pour épater la galerie. Imagine un site web qui brille et qui se démarque, peu importe si on le visite sur un téléphone, une tablette ou un ordinateur.

Les coulisses des Media Queries

Les Media Queries sont comme tes assistants personnels de mise en page, prêts à tout pour que ton site web brille sur chaque écran. Ils sont comme des génies du code qui s'adaptent automatiquement à chaque situation. Ton site sera une star du petit écran au grand écran !

4 Exemples de Magie Responsive :

1. Petits écrans, grand confort :


            /* Ajuste la taille du texte pour une lecture agréable sur les téléphones */
            @media (max-width: 576px) {
                body {
                    font-size: 16px;
                    line-height: 1.6;
                }
            }

2. Écrans moyens, navigation fluide sur les tablettes :


            /* Réorganise les éléments pour une expérience intuitive sur les tablettes */
            @media (min-width: 768px) and (max-width: 1024px) {
                .navbar {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                }
            }

3. Écrans larges, impact visuel sur les ordinateurs :


            /* Augmente la taille des titres pour un effet saisissant sur les ordinateurs */
            @media (min-width: 1200px) {
                h2 {
                    font-size: 36px;
                    margin-bottom: 20px;
                }
            }

4. Écrans extra-larges, design moderne pour les grands écrans :


            /* Utilise une mise en page en grille pour un look contemporain sur les grands écrans */
            @media (min-width: 1600px) {
                .grid {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 20px;
                }
            }

Avec ces astuces, votre site web sera prêt à impressionner, quel que soit l'écran de vos visiteurs !

Créons maintenant un site web complet et responsive :


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Page Responsive</title>
    <link rel="stylesheet" href="styles.css">
</head>
<style>
/* Réinitialisation des styles de base */
body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
}

/* Styles généraux */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f7f7f7;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

nav ul {
    list-style: none;
}

nav li {
    display: inline;
    margin-right: 20px;
}

nav a {
    color: #fff;
    text-decoration: none;
}

.main-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px;
}

article {
    flex: 1;
    margin-right: 20px;
}

aside {
    flex: 1;
}

footer {
    text-align: center;
    padding: 10px 0;
    background-color: #333;
    color: #fff;
}

/* Media Queries pour différents types d'écran */

/* Petits écrans */
@media (max-width: 767px) {
    header {
        font-size: 24px;
    }
    nav li {
        margin-right: 10px;
    }
    .main-content {
        flex-direction: column;
    }
}

/* Tablettes en mode portrait */
@media (min-width: 768px) and (max-width: 991px) {
    header {
        background-color: #555;
    }
    nav li {
        font-size: 18px;
    }
    article {
        margin-right: 10px;
    }
    aside {
        font-size: 16px;
    }
}

/* Tablettes en mode paysage et ordinateurs de bureau */
@media (min-width: 992px) {
    article {
        flex: 2;
    }
    aside {
        flex: 1;
    }
    footer {
        font-size: 14px;
    }
}

</style>
<body>
    <header>
        <h1>Ma Page Responsive</h1>
        <nav>
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="#">À Propos</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <section class="main-content">
        <article>
            <h2>Titre de l'article</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel tincidunt nulla.</p>
        </article>
        
        <aside>
            <h3>À la Une</h3>
            <ul>
                <li><a href="#">Nouvelles</a></li>
                <li><a href="#">Événements</a></li>
            </ul>
        </aside>
    </section>
    
    <footer>
        <p>© 2023 Ma Page Responsive. Tous droits réservés.</p>
    </footer>
</body>
</html>

Ton site web est maintenant prêt à faire sensation sur tous les types d'écran. Fais briller ton site avec la magie du Responsive Design et offre une expérience exceptionnelle à chaque utilisateur ! 🎉📱💻

1 commentaire

  1. 8/10/2023
    Cool
  • A+
  • A-