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.

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