Media Query

Fait partie de la section Styling with 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 les media queries, qui nous permettent d'appliquer différents styles en fonction de la largeur de l'écran.

Créez une media query pour les écrans d'une largeur 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 de 400px ou moins.
Ciblez le .menu et réglez son padding sur 10px pour le rendre plus compact.
Ciblez l'img et réglez sa propriété float sur none afin qu'elle se déplace au-dessus du texte sur les petits écrans.
Réglez la width de l'img à l'intérieur de .about sur 80vw pour qu'elle s'adapte aux petits écrans.
Ciblez la section .contact et réglez sa height sur auto pour permettre à la section de s'agrandir ou de rétrécir en fonction du contenu, garantissant 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>