CSSMedia query áp một khối CSS khi điều kiện về thiết bị đúng.
css
/* mobile-first: chỉ thêm khi màn đủ rộng */
@media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } }
/* kết hợp điều kiện */
@media (min-width: 768px) and (max-width: 1023px) { ... }
/* cú pháp khoảng, gọn hơn (Chrome 104+, Safari 16.4+) */
@media (768px <= width < 1024px) { ... }
/* không chỉ có kích thước */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
@media (prefers-color-scheme: dark) { ... }
@media (hover: none) { .tooltip { display: none; } }
@media print { nav { display: none; } }Ngưỡng hay dùng: 640 / 768 / 1024 / 1280px — nhưng đó là quy ước của Tailwind, không phải chuẩn.
Lưu ý 1: đừng đặt breakpoint theo tên thiết bị. Chọn ngưỡng ở chỗ layout bắt đầu vỡ, phát hiện bằng cách kéo cửa sổ nhỏ dần.
Lưu ý 2: max-width: 768px và min-width: 768px cùng khớp tại đúng 768px. Dùng max-width: 767.98px hoặc chuyển hẳn sang cú pháp khoảng.
Chốt: hai truy vấn hay bị bỏ quên nhưng interviewer đánh giá cao là prefers-reduced-motion và prefers-color-scheme — chúng thể hiện có nghĩ tới người dùng thật.