Thiết kế đáp ứng là gì?

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

Trong thiết kế web, thiết kế đáp ứng là một phương pháp nhằm tạo ra các trang web thích ứng và mang lại trải nghiệm xem tối ưu trên nhiều loại thiết bị, từ màn hình máy tính để bàn đến điện thoại di động. Trang web đáp ứng sẽ tự động điều chỉnh bố cục, nội dung và chức năng dựa trên kích thước, độ phân giải và hướng màn hình của thiết bị đang được dùng để xem trang. Mục tiêu của thiết kế đáp ứng là giúp người dùng dễ dàng truy cập và tương tác với trang web, bất kể họ đang dùng thiết bị nào.

Thiết kế đáp ứng được thực hiện bằng cách kết hợp nhiều kỹ thuật, bao gồm:

Lưới và bố cục linh hoạt: Sử dụng CSS grid hoặc Flexbox để tạo bố cục có thể thích ứng với nhiều kích thước màn hình khác nhau.

Hình ảnh và phương tiện linh hoạt: Đảm bảo hình ảnh và các phương tiện khác co giãn theo tỷ lệ của bố cục.

Truy vấn media: Áp dụng các kiểu CSS khác nhau dựa trên đặc điểm của thiết bị, chẳng hạn như chiều rộng, chiều cao và hướng màn hình.

Khi ngày càng nhiều người dùng thiết bị di động để duyệt web, thiết kế thích ứng là yếu tố thiết yếu giúp trang web dễ sử dụng. Thiết kế này giúp trang web hiển thị đẹp và hoạt động tốt trên mọi thiết bị, mang đến cho người dùng trải nghiệm mượt mà và nhất quán.

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có tiêu đề (<h1>), một đoạn văn (<p>) và hai hình ảnh (<img>). Nhiệm vụ của bạn là thêm một số CSS cơ bản để các phần tử hiển thị thích ứng và minh họa rõ sự khác nhau giữa chiều cao cố định và chiều cao tự động. Làm theo các bước dưới đây:

Viết quy tắc CSS áp dụng cho phần tử <h1>. Đặt font-size thành 5vw. Nhờ đó, cỡ chữ của tiêu đề sẽ thích ứng với chiều rộng khung nhìn.
Viết quy tắc CSS áp dụng cho phần tử <p>. Đặt font-size thành 3vw. Nhờ đó, cỡ chữ của đoạn văn sẽ thích ứng với chiều rộng khung nhìn.
Viết quy tắc CSS áp dụng cho lớp .fixed-height. Đặt width thành 100% và height thành 150px. Cách này sẽ làm hình ảnh méo đi vì buộc hình ảnh có chiều cao cố định.
Viết quy tắc CSS áp dụng cho lớp .auto-height. Đặt width thành 100% và height thành auto. Cách này sẽ giúp hình ảnh thay đổi kích thước theo tỷ lệ, đồng thời giữ nguyên tỷ lệ khung hình.
Viết các quy tắc CSS cho vùng chứa (.container) để đặt width thành 300px, border thành 2px solid #ccc, margin thành 20px và padding thành 10px.

Tự làm thử

<html>
<head>
    <title>What is Responsive Design?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Mount Everest: The World's Highest Peak</h1>
    <p>Mount Everest, standing at 8,848.86 meters (29,031.7 feet), is the tallest mountain on Earth. Located in the Himalayas on the border between Nepal and Tibet, it attracts climbers from around the world. Scaling Everest is a challenging journey due to its extreme weather, thin air, and rough terrain.</p>
    
    <div class="container">
        <h3>Fixed Height (Distorted)</h3>
        <img class="fixed-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Distorted Image">
    </div>
    
    <div class="container">
        <h3>Auto Height (Preserved Aspect Ratio)</h3>
        <img class="auto-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Proper Ratio Image">
    </div>
</body>
</html>