Media query trong CSS: breakpoint, min-width và max-width

Media query qua một ví dụ

Media query bọc CSS trong một điều kiện. Các quy tắc bên trong @media (min-width: 600px) chỉ được áp dụng khi viewport rộng ít nhất 600px:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Media query</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .banner { padding: 16px; background: #f59e0b; color: #111827; }
    .banner::after { content: " (narrow: under 600px)"; }

    @media (min-width: 600px) {
      .banner { background: #2563eb; color: white; }
      .banner::after { content: " (wide: 600px or more)"; }
    }
  </style>
</head>
<body>
  <p class="banner">This box changes color at 600px</p>
  <p id="w"></p>
  <script>
    const show = () => { document.getElementById('w').textContent = 'This preview is ' + window.innerWidth + 'px wide.'; };
    addEventListener('resize', show);
    show();
  </script>
</body>
</html>

Bản xem trước là một khung, và media query bên trong nó đo khung đó chứ không đo màn hình của bạn. Trên máy tính, khung rộng gần bằng cột bài viết này, thường hơn 600px, nên hộp có màu xanh. Thu hẹp cửa sổ trình duyệt đến khi khung xuống dưới 600px thì hộp chuyển sang màu hổ phách; dòng dưới hộp báo chiều rộng của khung theo thời gian thực. Trên điện thoại, khung vốn đã hẹp nên bạn thấy phiên bản màu hổ phách.

Cú pháp @media

@media (min-width: 600px) { ... }                        /* one condition */
@media (min-width: 600px) and (max-width: 899px) { ... } /* both must be true */
@media (max-width: 599px), print { ... }                 /* either one (comma = or) */
@media not print { ... }                                 /* negation */
@media screen and (orientation: landscape) { ... }       /* media type plus a feature */
@media (width >= 600px) { ... }                          /* range syntax */
@media (600px <= width < 900px) { ... }                  /* a range with both ends */

and cần dấu cách ở cả hai bên: (min-width: 600px)and(max-width: 900px) không hợp lệ và cả truy vấn bị bỏ qua. Cú pháp khoảng (width >= 600px) được hỗ trợ trong Chrome, Firefox và Safari hiện nay và dễ đọc hơn min-width, nhất là với trường hợp "đến nhưng không bao gồm".

Những đặc điểm bạn sẽ dùng nhiều nhất:

Mobile first: breakpoint min-width

Viết bố cục cho điện thoại làm CSS cơ bản, rồi thêm các truy vấn min-width để đổi bố cục khi có thêm chỗ. Mỗi truy vấn chỉ cần mô tả những gì thay đổi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mobile first</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .cards div { background: #16a34a; color: white; padding: 18px; border-radius: 6px; }

    @media (min-width: 480px) {
      .cards { grid-template-columns: 1fr 1fr; }
    }
    @media (min-width: 720px) {
      .cards { grid-template-columns: 1fr 1fr 1fr; }
    }
  </style>
</head>
<body>
  <div class="cards"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>
  <p id="out"></p>
  <script>
    const show = () => {
      const n = getComputedStyle(document.querySelector('.cards')).gridTemplateColumns.split(' ').length;
      document.getElementById('out').textContent = innerWidth + 'px wide: ' + n + ' column(s)';
    };
    addEventListener('resize', show);
    show();
  </script>
</body>
</html>

Trong cửa sổ máy tính rộng, bản xem trước rộng hơn 720px nên bạn thấy ba cột; dòng dưới lưới báo chiều rộng và số cột. Thu hẹp cửa sổ thì lưới còn hai cột khi dưới 720px và một cột khi dưới 480px. Thứ tự của hai truy vấn rất quan trọng: trên màn hình rộng cả hai đều đúng, và truy vấn viết sau sẽ thắng, nên các truy vấn min-width đi từ nhỏ đến lớn. (Với truy vấn max-width thì ngược lại: lớn nhất trước.)

Chọn breakpoint

Không có danh sách chính thức. Đây là các giá trị phổ biến và những gì chúng thường phân tách:

Một cách tốt hơn: bắt đầu từ bố cục hẹp, kéo rộng cửa sổ đến khi có gì đó trông không ổn (dòng quá dài, thẻ quá rộng), rồi đặt breakpoint ở đó. Hai hoặc ba breakpoint là đủ cho phần lớn trang. Nhiều khi bạn chẳng cần cái nào: repeat(auto-fit, minmax(200px, 1fr)) trong grid, flex-wrap và clamp() tự thích ứng liên tục.

Trang nào cũng cần thẻ meta viewport

Thiếu thẻ này trong <head>, trình duyệt điện thoại sẽ dàn trang như thể màn hình rộng khoảng 980px rồi thu nhỏ lại, nên truy vấn min-width: 480px luôn đúng và bố cục cho điện thoại không bao giờ hiện ra:

<meta name="viewport" content="width=device-width, initial-scale=1">

Trang meta viewport giải thích từng giá trị trong thẻ này.

Dark mode với prefers-color-scheme

prefers-color-scheme đi theo cài đặt sáng hoặc tối của hệ điều hành. Cách gọn nhất là giữ màu trong biến CSS và chỉ đổi các biến bên trong truy vấn:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dark mode</title>
  <style>
    :root { --bg: #ffffff; --text: #111827; --card: #e5e7eb; }

    @media (prefers-color-scheme: dark) {
      :root { --bg: #111827; --text: #f9fafb; --card: #1f2937; }
    }

    /* A theme toggle sets the same variables by hand */
    :root[data-theme="dark"] { --bg: #111827; --text: #f9fafb; --card: #1f2937; }
    :root[data-theme="light"] { --bg: #ffffff; --text: #111827; --card: #e5e7eb; }

    body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; padding: 12px; }
    .card { background: var(--card); padding: 16px; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="card">This card follows your system setting, or the button.</div>
  <p><button id="toggle">Switch theme</button></p>
  <p id="out"></p>
  <script>
    const mq = matchMedia('(prefers-color-scheme: dark)');
    const root = document.documentElement;
    const show = () => {
      document.getElementById('out').textContent =
        'Dark mode query matches: ' + mq.matches + '. Theme: ' + (root.dataset.theme || 'system');
    };
    document.getElementById('toggle').addEventListener('click', () => {
      const dark = root.dataset.theme ? root.dataset.theme === 'dark' : mq.matches;
      root.dataset.theme = dark ? 'light' : 'dark';
      show();
    });
    mq.addEventListener('change', show);
    show();
  </script>
</body>
</html>

Trong bản xem trước này, truy vấn có thể in ra false dù hệ thống của bạn đang để chế độ tối: Chrome không truyền cài đặt hệ thống vào một khung sandbox như thế này. Nút bấm đặt chính các biến đó bằng tay, giống cách nút đổi giao diện của một trang web hoạt động. :root[data-theme] có độ ưu tiên cao hơn :root thường bên trong truy vấn, nên lựa chọn của người đọc thắng cài đặt hệ thống. Hãy lưu ví dụ thành tệp rồi mở ra để thấy truy vấn đi theo hệ thống của bạn.

Đoạn script cho thấy nửa còn lại của media query: matchMedia() chạy cùng truy vấn đó từ JavaScript, trả về việc hiện tại nó có khớp hay không, và phát sự kiện change khi kết quả thay đổi. Hãy dùng nó khi hành vi (chứ không chỉ giao diện) phụ thuộc vào màn hình, chẳng hạn mở menu theo cách khác trên thiết bị cảm ứng.

Chuyển động cũng làm tương tự. Hãy bọc các animation lớn hoặc lặp lại trong một điều kiện kiểm tra prefers-reduced-motion, như trong trang animation.

Container query: khi component tự quyết định

Media query chỉ biết viewport. Một thẻ nằm trong cột chính rộng và cả trong thanh bên hẹp trên cùng một trang thì cần biết khoảng trống của chính nó. Đó là container query: đánh dấu phần tử cha bằng container-type: inline-size, rồi dùng @container với những điều kiện tương tự.

Kéo góc của hộp xám để đổi kích thước. Thẻ đổi bố cục khi chiều rộng hộp là 360px, bất kể cửa sổ rộng bao nhiêu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Container query</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .holder {
      container-type: inline-size;
      resize: horizontal;
      overflow: hidden;
      width: 480px;
      max-width: 100%;
      min-width: 160px;
      padding: 8px;
      background: #e5e7eb;
    }
    .card { display: grid; gap: 10px; background: white; padding: 10px; border-radius: 8px; }
    .pic { height: 70px; background: #2563eb; border-radius: 6px; }

    @container (min-width: 360px) {
      .card { grid-template-columns: 120px 1fr; }
    }
  </style>
</head>
<body>
  <div class="holder">
    <div class="card"><div class="pic"></div><p>Image beside the text when the box is 360px or wider, above it when narrower.</p></div>
  </div>
</body>
</html>

Ở chiều rộng ban đầu 480px, hình nằm cạnh chữ. Kéo hộp hẹp hơn 376px (360px nội dung cộng 8px padding mỗi bên) thì hình chuyển lên trên chữ. Container query hoạt động trên mọi trình duyệt lớn hiện nay.

Style khi in

@media print chỉ áp dụng khi trang được in hoặc lưu thành PDF. Hãy ẩn thanh điều hướng và các nút, và dùng chữ tối trên nền trắng:

@media print {
  nav, .ad, button { display: none; }
  body { color: black; background: white; }
  a::after { content: " (" attr(href) ")"; } /* print the URL after each link */
}

Lỗi thường gặp

• Thiếu thẻ meta viewport. Khi đó điện thoại báo một layout viewport rộng và các truy vấn cho màn hình nhỏ không bao giờ khớp.
• Truy vấn sai thứ tự. Hai truy vấn cùng đúng với cùng một selector: truy vấn viết sau thắng. Hãy xếp các truy vấn min-width từ nhỏ đến lớn.
• Ranh giới chồng chéo hoặc bị hở. max-width: 768px và min-width: 768px cùng khớp ở đúng 768px. Hãy dùng 767px cho một trong hai, hoặc cú pháp khoảng (width < 768px) và (width >= 768px).
• Thiếu dấu cách sau and. and( không hợp lệ và truy vấn bị bỏ đi mà không báo gì.
• Chỉ thử bằng cách thu nhỏ cửa sổ máy tính. Hãy kiểm tra thêm trên điện thoại thật hoặc chế độ thiết bị của trình duyệt, vốn áp dụng viewport, tỷ lệ điểm ảnh và cảm ứng của điện thoại.
• Quá nhiều breakpoint. Nếu component nào cũng cần breakpoint riêng, hãy thử grid auto-fit, flex-wrap hoặc container query.