Responsive design là gì?

Responsive design là làm cho một bộ code hiển thị hợp lý trên mọi kích thước màn hình, thay vì dựng site riêng cho mobile.

Ba thành phần gốc (Ethan Marcotte, 2010):
1. Lưới co giãn — %, fr, flex thay cho chiều rộng cố định.
2. Ảnh linh hoạt — max-width: 100%, srcset.
3. Media query — đổi bố cục tại các ngưỡng.

/* mobile-first: base là mobile, thêm dần cho màn lớn */
.grid { display: grid; gap: 16px; }

@media (min-width: 768px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, 1fr); } }

/* nhiều trường hợp không cần media query nữa */
.cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
h1     { font-size: clamp(1.5rem, 4vw, 2.5rem); }

Hai công cụ hiện đại đáng nhắc khi phỏng vấn:
- Container query — component tự đáp ứng theo bề rộng container chứ không theo viewport, nên tái sử dụng được ở sidebar lẫn vùng nội dung chính.
- clamp() — co giãn liên tục thay vì nhảy bậc theo breakpoint.

Lưu ý: đừng đặt breakpoint theo tên thiết bị ("iPhone", "iPad"). Chọn ngưỡng theo chỗ layout bắt đầu vỡ, không theo model điện thoại — danh sách thiết bị thay đổi mỗi năm, còn layout thì không.