Bài 15. Thiết kế responsive: media query và container query

Một số khái niệm

Điều kiện tiên quyết: thẻ <meta name="viewport" content="width=device-width, initial-scale=1">. Sau đó, viết CSS mặc định cho điện thoại (bố cục 1 cột), rồi dùng @media (min-width: ...) thêm cột khi màn hình rộng hơn. Cách này giữ CSS cho điện thoại nhẹ và đơn giản.

Đừng chọn breakpoint theo từng thiết bị cụ thể; hãy thu nhỏ trình duyệt và thêm breakpoint ở chỗ giao diện bắt đầu vỡ.

Media query mobile-first

<style>
  .ds { display: grid; gap: 8px; grid-template-columns: 1fr; }
  .ds div { background: #e3f2fd; padding: 14px; border-radius: 8px; text-align: center; }
  @media (min-width: 420px) { .ds { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 640px) { .ds { grid-template-columns: repeat(4, 1fr); } .ds div { background: #e8f5e9; } }
  @media (orientation: landscape) and (max-height: 400px) { .ds div { padding: 6px; } }
</style>
<div class="ds"><div>1</div><div>2</div><div>3</div><div>4</div></div>
<p style="font-size:13px;color:#666">Thu nhỏ cửa sổ trình duyệt: 4 → 2 → 1 cột.</p>

/* Cú pháp khoảng (range syntax) mới, dễ đọc */
@media (480px <= width < 992px) { ... }

Container query

<style>
  .vo { container-type: inline-size; border: 2px dashed #90a4ae; padding: 8px; margin-bottom: 8px; border-radius: 8px; }
  .the { display: grid; gap: 10px; background: #fff; }
  .the .anh { aspect-ratio: 16/9; background: #90a4ae; border-radius: 6px; }
  @container (min-width: 380px) { .the { grid-template-columns: 140px 1fr; } .the .anh { aspect-ratio: 1; } }
</style>
<div class="vo" style="width:300px"><div class="the"><div class="anh"></div><div><b>Thẻ trong cột hẹp</b><br>Ảnh nằm trên</div></div></div>
<div class="vo"><div class="the"><div class="anh"></div><div><b>Thẻ trong cột rộng</b><br>Ảnh tự chuyển sang trái</div></div></div>

Cùng một thẻ, đặt vào cột hẹp (sidebar) hay cột rộng (nội dung chính) tự đổi bố cục theo khung chứa, không phụ thuộc màn hình. Đây là cách xây thành phần tái sử dụng hiện đại.

Media feature về người dùng

/* Chế độ tối theo hệ điều hành */
@media (prefers-color-scheme: dark) {
  :root { --nen: #121212; --chu: #e0e0e0; }
}
/* Người dùng bật giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Chỉ áp dụng hiệu ứng hover cho thiết bị có chuột */
@media (hover: hover) and (pointer: fine) {
  .the:hover { transform: translateY(-4px); }
}
/* Khi in */
@media print { nav, footer, .quang-cao { display: none; } a::after { content: " (" attr(href) ")"; } }