Bài 7. Biến CSS và thiết kế đáp ứng

Biến CSS cho phép đổi giao diện tập trung; thiết kế đáp ứng giúp một trang đẹp trên mọi màn hình.

40 phútCơ bản
Bạn sẽ học được
  • Khai báo và dùng biến CSS
  • Làm chế độ sáng/tối
  • Dùng media query và tiếp cận mobile-first
  • Dùng clamp(), min(), max() cho cỡ linh hoạt
Thuật ngữ cần biết
Biến CSS
Giá trị tái sử dụng, khai báo --ten, dùng var(--ten).
Media query
Điều kiện áp dụng CSS theo màn hình hoặc sở thích người dùng.
Breakpoint
Điểm chiều rộng mà bố cục thay đổi.
Mobile-first
Viết CSS cho điện thoại trước rồi mở rộng cho màn hình lớn.

Khái niệm và lý thuyết

Thiết kế đáp ứng (responsive) là làm một trang hoạt động tốt trên mọi kích thước màn hình bằng ba thành phần: lưới linh hoạt (dùng %, fr, rem thay vì px cố định), ảnh linh hoạt (max-width: 100%) và truy vấn media (đổi CSS theo điều kiện). Thẻ meta viewport báo cho điện thoại hiển thị theo chiều rộng thật thay vì thu nhỏ trang desktop.

Mobile-first: viết CSS cho màn hình nhỏ trước, rồi dùng min-width để thêm bố cục cho màn hình lớn. Cách này nhẹ hơn cho điện thoại và buộc bạn ưu tiên nội dung thiết yếu.

Biến CSS (custom properties) khai báo bằng --ten và dùng var(--ten). Khác biến của bộ tiền xử lý, chúng "sống" trong trình duyệt, kế thừa theo cây DOM và có thể đổi bằng JavaScript hoặc theo điều kiện, nên rất phù hợp để làm chủ đề sáng/tối.

Biến CSS

:root {
  --chinh: #2e7d32;
  --nen: #ffffff;
  --chu: #263238;
  --cach: 1rem;
}
.btn { background: var(--chinh); padding: var(--cach); }
body { background: var(--nen); color: var(--chu); }

Chế độ tối

@media (prefers-color-scheme: dark) {
  :root { --nen: #121212; --chu: #eceff1; --chinh: #66bb6a; }
}
/* hoặc bật bằng lớp: */
:root.toi { --nen: #121212; --chu: #eceff1; }

Media query, mobile-first

.luoi { display: grid; gap: 1rem; }      /* điện thoại: 1 cột */
@media (min-width: 768px) {
  .luoi { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .luoi { grid-template-columns: repeat(3, 1fr); }
}
Thiết bịChiều rộng gợi ý
Điện thoạiđến 767px
Máy tính bảng768 – 1099px
Máy tínhtừ 1100px

Cỡ linh hoạt

h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
.khung { width: min(100% - 2rem, 1100px); margin-inline: auto; }
img { max-width: 100%; height: auto; }
Tình huống: Một nút đổi toàn bộ màu website

Chuyển thương hiệu từ xanh lá sang xanh dương chỉ cần sửa --chinh một lần thay vì tìm 40 chỗ mã màu.

Mẹo hay

Luôn có <meta name="viewport" content="width=device-width, initial-scale=1">; kiểm tra bằng chế độ thiết bị của DevTools (Ctrl+Shift+M).

Lưu ý

Đừng đặt breakpoint theo tên thiết bị cụ thể; hãy đặt tại chỗ bố cục bị vỡ.

Thực hành
  1. Chuyển màu chính, nền, chữ của một trang sang biến CSS.
  2. Thêm chế độ tối bằng prefers-color-scheme.
  3. Làm lưới 1, 2, 3 cột theo ba breakpoint.
Tóm tắt bài học
  • Biến CSS giúp đổi giao diện tập trung.
  • Mobile-first với min-width.
  • clamp() cho chữ mượt; ảnh max-width: 100%.