Media query cho phép thiết kế responsive như thế nào?

Question

IT Interview Practice · Accepted Answer

**Media query** áp dụng CSS có điều kiện dựa trên đặc điểm thiết bị — thường nhất là **chiều rộng viewport** — cho phép một stylesheet thích ứng với điện thoại, tablet, và desktop.

```css
/* style cơ bản (mobile-first) */
.container { padding: 1rem; }

/* chỉ áp dụng khi viewport rộng ÍT NHẤT 768px */
@media (min-width: 768px) {
  .container { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .container { grid-template-columns: 1fr 1fr 1fr; }
}
```

## Mobile-first (min-width) vs desktop-first (max-width)

```css
/* ✅ mobile-first: base = mobile, thêm các cải tiến khi rộng hơn */
@media (min-width: 768px) { ... }

/* desktop-first: base = desktop, ghi đè xuống cho màn hình nhỏ hơn */
@media (max-width: 767px) { ... }
```

**Mobile-first** (`min-width`) thường được ưa chuộng hơn: bạn viết style cơ bản đơn giản cho màn hình nhỏ, rồi dần thêm độ phức tạp cho màn hình lớn hơn. Cách này thường tạo ra CSS sạch hơn, nhẹ hơn và khớp với cách nội dung reflow.

## Các query hữu ích khác

```css
@media (max-width: 600px) { }                 /* màn hình nhỏ */
@media (orientation: landscape) { }            /* hướng thiết bị */
@media (prefers-color-scheme: dark) { }        /* người dùng muốn dark mode */
@media (prefers-reduced-motion: reduce) { }    /* người dùng không thích animation — accessibility */
@media print { }                                /* stylesheet cho in ấn */
```

`prefers-reduced-motion` và `prefers-color-scheme` phản hồi theo *tùy chọn* của người dùng, không phải kích thước màn hình — quan trọng cho accessibility và theming.

## Kết hợp các điều kiện

```css
@media (min-width: 768px) and (max-width: 1023px) { /* chỉ tablet */ }
```

## Một lưu ý về tương lai: container query

Media query phản hồi theo **viewport**; container query (`@container`) mới hơn phản hồi theo kích thước của một *phần tử cha* — tốt hơn cho các component thực sự tái sử dụng được. Chúng bổ sung cho media query chứ không thay thế.

## Tại sao điều này quan trọng

Media query là nền tảng của thiết kế responsive — thích ứng layout, spacing, và cột theo kích thước màn hình.

Cách tiếp cận mobile-first `min-width` giữ CSS dễ quản lý, và các preference query (`prefers-reduced-motion`, `prefers-color-scheme`) mở rộng tính responsive sang accessibility và theming.

Mobile-first (min-width) vs desktop-first (max-width)

Các query hữu ích khác

Kết hợp các điều kiện

Một lưu ý về tương lai: container query

Tại sao điều này quan trọng

Câu hỏi liên quan