Media Query

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 72 من 76.

التحدي

سهل

في هذا الدرس، ستتأكد من أن صفحة الويب تبدو جيدة على أحجام الشاشات المختلفة. استخدم استعلامات الوسائط (media queries)، والتي تتيح لنا تطبيق أنماط مختلفة بناءً على عرض الشاشة.

قم بإنشاء استعلام وسائط للشاشات التي يقل عرضها عن 400px. اتبع الخطوات أدناه:

اكتب قاعدة CSS باستخدام @media (max-width: 400px) لتطبيق الأنماط عندما يكون عرض الشاشة 400px أو أقل.
استهدف .menu واضبط padding الخاص به على 10px لجعله أكثر إحكاماً.
استهدف img واضبط خاصية float على none بحيث تنتقل فوق النص على الشاشات الصغيرة.
اضبط width الخاص بـ img داخل .about على 80vw ليتناسب مع الشاشات الصغيرة.
استهدف قسم .contact واضبط height الخاص به على auto للسماح للقسم بالتمدد أو التقلص بناءً على المحتوى، مما يضمن بقاء جميع العناصر مرئية ومحاذية بشكل صحيح على أحجام الشاشات المختلفة.

بعد تطبيق هذه التغييرات، اختبر صفحتك عن طريق تغيير حجم نافذة المتصفح لمعرفة كيف يتكيف التخطيط.

جرّب بنفسك

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