Bài Giảng: CSS 6 - Responsive Design

1. Giới thiệu về Responsive Design

Responsive Design giúp trang web hiển thị đẹp và phù hợp trên nhiều loại màn hình như điện thoại, máy tính bảng, máy tính để bàn… bằng cách thay đổi bố cục, kích thước chữ, hình ảnh mà không cần tạo nhiều phiên bản trang web riêng biệt.

2. Các kỹ thuật chính trong Responsive Design

2.1. Sử dụng đơn vị tương đối

Để giúp trang web co giãn linh hoạt, ta ưu tiên dùng đơn vị tương đối thay vì đơn vị cố định như px.

Ví dụ:

.container {
    width: 80%;
    font-size: 1.2rem; /* 1.2 lần kích thước chữ mặc định */
}

2.2. Media Queries - Điều chỉnh giao diện theo kích thước màn hình

Media Queries giúp thay đổi CSS khi kích thước màn hình thay đổi.

Cú pháp cơ bản:

@media (max-width: 768px) {
    body {
        background-color: lightgray;
    }
}

🚀 Ví dụ thực tế: Khi màn hình nhỏ hơn 768px, .container sẽ chiếm toàn bộ chiều rộng.

.container {
    width: 80%;
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    .container {
        width: 100%;
        font-size: 1rem;
    }
}

2.3. Hệ thống 12 cột trong Responsive Design

Hệ thống 12 cột giúp chia bố cục linh hoạt bằng cách sử dụng width theo phần trăm.
Mỗi cột trong hệ thống 12 cột chiếm 8.33% chiều rộng (100% / 12 = 8.33%).

📌 Công thức tính chiều rộng của một cột:

.column-x {
    width: calc(8.33% * x); /* x là số cột */
}

🚀 Ví dụ:

• .col-1  { width: 8.33%; }
• .col-2  { width: 16.66%; }
• .col-3  { width: 25%; }
• .col-4  { width: 33.33%; }
• .col-5  { width: 41.66%; }
• .col-6  { width: 50%; }
• .col-7  { width: 58.33%; }
• .col-8  { width: 66.66%; }
• .col-9  { width: 75%; }
• .col-10 { width: 83.33%; }
• .col-11 { width: 91.66%; }
• .col-12 { width: 100%; }

💡 Triển khai hệ thống 12 cột bằng CSS:

.row {
    display: flex;
    flex-wrap: wrap;
}

.column {
    padding: 10px;
    box-sizing: border-box;
}

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-6 { width: 50%; }
.col-12 { width: 100%; }

📌 Khi áp dụng vào HTML:

<div class="row">
    <div class="column col-3">3 cột</div>
    <div class="column col-6">6 cột</div>
    <div class="column col-3">3 cột</div>
</div>

✅ Quy tắc: Tổng số cột của một hàng không vượt quá 12.

🚀 Thay đổi số cột theo kích thước màn hình bằng @media:

@media (max-width: 768px) {
    .column { width: 100%; } /* Khi màn hình nhỏ, mỗi cột chiếm toàn bộ hàng */
}

📌 Kết quả: Trên màn hình lớn, cột hiển thị theo số lượng quy định. Khi nhỏ hơn 768px, mỗi cột sẽ tự động chiếm toàn bộ chiều rộng.

4. Kết luận

• Responsive Design giúp trang web tương thích với nhiều màn hình.
• Dùng đơn vị tương đối như %, vw, em, rem để giao diện linh hoạt.
• Media Queries giúp thay đổi CSS theo kích thước màn hình.
• Hệ thống 12 cột giúp chia bố cục dễ dàng, mỗi cột có 8.33% chiều rộng, có thể tùy chỉnh số cột theo từng kích thước màn hình.

💡 Thực hành: Hãy thử tạo một layout responsive với hệ thống 12 cột để hiểu rõ hơn.