Media query

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 72 sur 76.

Défi

Facile

Dans cette leçon, vous allez vous assurer que la page Web s’affiche correctement sur différentes tailles d’écran. Utilisez des requêtes média, qui nous permettent d’appliquer différents styles en fonction de la largeur de l’écran.

Créez une requête média pour les écrans dont la largeur est inférieure à 400px. Suivez les étapes ci-dessous :

Écrivez une règle CSS utilisant @media (max-width: 400px) pour appliquer des styles lorsque la largeur de l’écran est inférieure ou égale à 400px.
Ciblez .menu et définissez son padding sur 10px pour le rendre plus compact.
Ciblez img et définissez sa propriété float sur none afin qu’il se déplace au-dessus du texte sur les écrans plus petits.
Définissez la width de img à l’intérieur de .about sur 80vw afin qu’elle s’adapte aux écrans plus petits.
Ciblez la section .contact et définissez sa height sur auto pour permettre à la section de s’agrandir ou de rétrécir en fonction du contenu, en veillant à ce que tous les éléments restent correctement visibles et alignés sur différentes tailles d’écran.

Après avoir appliqué ces modifications, testez votre page en redimensionnant la fenêtre du navigateur pour voir comment la mise en page s’ajuste.

Essayez vous-même

<html>
    <head>
        <title>Swim with Whales in Tonga</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">  
    </head>
<body>
    <nav class="menu">
        <a href="#about">About</a>
        <a href="#experience">Experience</a>
        <a href="#contact">Contact</a>
    </nav>    
    <header class="welcome">
        <h1>Swim with Whales in Tonga</h1>
        <p>Experience the magic of swimming alongside majestic humpback whales.</p>
    </header>    
    <section class="about">
        <h2>About Tonga</h2>
        <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Hawaiian_Islands_Humpback_Whale_National_Marine_Sanctuary_breaching_2018.png">
        <p>Tonga is a stunning Polynesian archipelago in the South Pacific, famous for its crystal-clear waters and vibrant marine life. From July to October, humpback whales migrate here to breed, offering a rare chance to swim with these gentle giants. Beyond whale encounters, Tonga boasts pristine beaches, lush tropical landscapes, and a rich cultural heritage. Visitors can explore traditional villages, experience authentic Tongan hospitality, and enjoy activities like snorkeling, diving, and sailing. Whether you're seeking adventure or relaxation, Tonga provides an unforgettable escape into nature’s beauty.</p>
    </section>      
    <section class="contact">
        <h2>Plan Your Adventure</h2>
        <table>
            <tr>
                <td>Phone Number</td>
                <td>+676 123 4567</td>
            </tr>
            <tr>
                <td>Email</td>
                <td>info@tongawhales.com</td>
            </tr>
        </table>
    </section>
</body>
</html>