Media Query

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 72 / 76.

Görev

Kolay

Bu derste, web sayfasının farklı ekran boyutlarında iyi görünmesini sağlayacaksınız. Ekran genişliğine bağlı olarak farklı stiller uygulamamıza olanak tanıyan media queries (medya sorguları) kullanın.

Genişliği 400px'den küçük olan ekranlar için bir medya sorgusu oluşturun. Aşağıdaki adımları izleyin:

Ekran genişliği 400px veya daha küçük olduğunda stilleri uygulamak için @media (max-width: 400px) kullanarak bir CSS kuralı yazın.
.menu sınıfını hedefleyin ve daha kompakt hale getirmek için padding değerini 10px olarak ayarlayın.
img etiketini hedefleyin ve küçük ekranlarda metnin üzerine taşınması için float özelliğini none olarak ayarlayın.
Küçük ekranlara uyum sağlaması için .about içindeki img etiketinin width değerini 80vw olarak ayarlayın.
.contact bölümünü hedefleyin ve tüm öğelerin farklı ekran boyutlarında düzgün bir şekilde görünür ve hizalı kalmasını sağlamak için, bölümün içeriğe göre genişlemesine veya daralmasına izin verecek şekilde height değerini auto olarak ayarlayın.

Bu değişiklikleri uyguladıktan sonra, düzenin nasıl ayarlandığını görmek için tarayıcı penceresini yeniden boyutlandırarak sayfanızı test edin.

Kendin dene

<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>