Truy vấn media

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 72 trên 76.

Thử thách

Dễ

Trong bài học này, bạn sẽ đảm bảo trang web hiển thị đẹp ở các kích thước màn hình khác nhau. Hãy dùng truy vấn phương tiện (media queries) để áp dụng các kiểu khác nhau tùy theo chiều rộng màn hình.

Tạo truy vấn phương tiện cho màn hình có chiều rộng nhỏ hơn 400px. Làm theo các bước dưới đây:

Viết quy tắc CSS bằng @media (max-width: 400px) để áp dụng kiểu khi chiều rộng màn hình từ 400px trở xuống.
Chọn .menu và đặt padding thành 10px để menu gọn hơn.
Chọn img và đặt thuộc tính float thành none để hình ảnh nằm phía trên văn bản trên màn hình nhỏ hơn.
Đặt width của img bên trong .about thành 80vw để hình ảnh thích ứng với màn hình nhỏ hơn.
Chọn phần .contact và đặt height thành auto để phần này có thể mở rộng hoặc thu nhỏ tùy theo nội dung, nhờ đó mọi thành phần vẫn hiển thị rõ ràng và được căn chỉnh phù hợp ở các kích thước màn hình khác nhau.

Sau khi áp dụng những thay đổi này, hãy thử thay đổi kích thước cửa sổ trình duyệt để xem bố cục điều chỉnh như thế nào.

Tự làm thử

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