Media Query Là Gì và Cách Dùng Trong Thiết Kế Website Responsive

Media query là câu lệnh CSS cho phép trang web nhận ra điều kiện màn hình đang hiển thị (kích thước, hướng xoay, chế độ màu sắc) rồi áp dụng bộ CSS phù hợp. Nhờ đó, cùng một file CSS có thể điều chỉnh bố cục từ điện thoại màn nhỏ lên đến màn hình máy tính rộng mà không cần làm nhiều phiên bản riêng biệt.

Media query là câu lệnh làm gì

Media query (truy vấn phương tiện) là phần mở rộng của CSS3, được Tổ chức W3C chuẩn hóa từ năm 2012 và được tất cả trình duyệt hiện đại hỗ trợ đầy đủ. Cú pháp bắt đầu bằng từ khóa @media, tiếp theo là điều kiện, rồi khối CSS được áp dụng khi điều kiện đó đúng.

Ví dụ đơn giản nhất: “nếu màn hình rộng ít nhất 768 pixel, hiện thanh menu dạng ngang”. Nếu điều kiện sai (màn hình hẹp hơn 768px), trình duyệt bỏ qua hoàn toàn khối CSS đó, không áp dụng gì cả.

Không có media query, trang web chỉ có một bộ CSS cố định: co lại hoặc tràn ra ngoài màn hình khi người dùng xem trên điện thoại. Có media query, bạn ra lệnh cho từng phần tử thay đổi kích thước, ẩn đi, hay xếp lại thứ tự tùy theo màn hình đang hiển thị.

Media query xuất hiện ở đâu trong quy trình làm web

Bất kỳ website nào được gọi là responsive (đáp ứng, tương thích nhiều màn hình) đều dùng media query. Câu lệnh này xuất hiện trong file CSS chính hoặc trong khối <style> nhúng thẳng vào HTML. Các framework CSS phổ biến như Bootstrap hay Tailwind CSS đều xây dựng nền responsive trên media query.

Khi đội kỹ thuật nói “cần breakpoint ở 768px”, họ đang nói về ngưỡng mà tại đó một media query sẽ kích hoạt hoặc tắt. Nếu bạn đọc bài về breakpoint là gì, bạn sẽ thấy hai khái niệm này đi liền nhau: breakpoint là ngưỡng giá trị, media query là câu lệnh kiểm tra ngưỡng đó.

Ngoài kích thước màn hình, media query còn có thể nhận ra nhiều điều kiện khác: hướng xoay của thiết bị (ngang hay dọc), độ phân giải màn hình (để phục vụ ảnh độ nét cao cho màn Retina), chế độ người dùng đang dùng (dark mode hay light mode), và cả khi người dùng in trang.

Cú pháp cơ bản và các thành phần của media query

Một câu media query đầy đủ có bốn phần. Từ khóa @media là bắt buộc, không thể thiếu. Loại phương tiện theo sau: screen (màn hình), print (in trang) hoặc all (tất cả). Tiếp đến là điều kiện trong ngoặc tròn, chẳng hạn (min-width: 768px). Cuối cùng là khối CSS trong ngoặc nhọn chỉ chạy khi điều kiện đúng.

Điều kiện có thể kết hợp bằng từ khóa logic: and yêu cầu cả hai điều kiện phải đúng; not phủ định điều kiện; bỏ loại phương tiện đi viết thẳng @media (min-width: 768px) vẫn hợp lệ vì trình duyệt mặc định hiểu là screen.

Từ CSS4 trở đi, bạn có thể viết điều kiện theo dạng tự nhiên hơn: @media (width >= 768px), nhưng cú pháp cũ với min-width vẫn chạy tốt trên mọi trình duyệt và được dùng rộng rãi hơn trong thực tế.

Mobile-first và desktop-first: nên chọn hướng nào

Đây là câu hỏi thực tế nhất khi bắt đầu viết CSS responsive. Hai hướng dùng keyword khác nhau và tạo ra lượng code khác nhau.

Hướng mobile-first viết CSS nền cho màn nhỏ trước, rồi dùng min-width để thêm CSS khi màn rộng hơn. Hướng desktop-first làm ngược lại: CSS nền cho màn lớn, rồi dùng max-width để thu hẹp khi màn nhỏ hơn.

Lý do mobile-first được ưa dùng hơn trong các dự án mới: Google đánh giá trang web qua phiên bản di động trước (chính sách mobile-first indexing từ 2019). Về phía code, điện thoại cần ít CSS hơn máy tính, nên viết CSS nền cho điện thoại trước và bổ sung khi màn rộng hơn cho ra file CSS gọn hơn là bắt đầu từ máy tính rồi cố ghi đè xuống điện thoại.

Breakpoint thông dụng trong thiết kế responsive

Không có bộ breakpoint chuẩn tuyệt đối nào bắt buộc phải theo. Tuy nhiên, phần lớn dự án thực tế xoay quanh bốn ngưỡng phổ biến: 320px cho điện thoại nhỏ, 768px cho máy tính bảng, 1024px cho laptop, và 1440px cho màn hình rộng (thường dùng để căn giữa nội dung, tránh chữ trải quá rộng khó đọc).

Bootstrap dùng: 576px, 768px, 992px, 1200px. Tailwind CSS dùng: 640px, 768px, 1024px, 1280px, 1536px. Framework nào thì dùng breakpoint của framework đó làm điểm khởi đầu, chỉ thêm breakpoint tùy chỉnh khi thiết kế thực sự cần một ngưỡng mà framework chưa có.

Một nguyên tắc thiết thực: không nên chọn breakpoint theo từng model điện thoại (vì quá nhiều model), mà chọn theo nhóm màn hình: nhỏ, vừa, lớn, rất lớn. Breakpoint tốt nhất là nơi thiết kế bắt đầu trông bị vỡ, không phải bị ép khớp với một thiết bị cụ thể.

Các loại media query ngoài kích thước màn hình

Media query không chỉ dừng ở width. Bốn loại điều kiện khác hay gặp trong dự án thực tế:

Print: @media print { } ẩn menu, quảng cáo, footer, giữ lại phần nội dung chính khi người dùng in trang. Trang tin tức và trang mô tả sản phẩm thường dùng cách này để bản in ra giấy đọc được.

Prefers-color-scheme: Phát hiện người dùng đang bật dark mode trên hệ điều hành. Website tự đổi màu nền và màu chữ mà không cần người dùng chọn lại trong giao diện. Chrome, Safari, Firefox đều hỗ trợ từ 2019.

Orientation: Nhận biết thiết bị đang xoay ngang (landscape) hay dọc (portrait). Hữu ích cho ứng dụng xem ảnh toàn màn hình hoặc trang trình chiếu cần tận dụng chiều rộng màn hình khi thiết bị xoay.

Resolution: Phân biệt màn hình Retina (mật độ điểm ảnh cao gấp đôi) để phục vụ ảnh sắc nét hơn. Dùng kèm thẻ <picture> và thuộc tính srcset để tải đúng kích thước ảnh cho từng loại màn.

Ví dụ cụ thể: menu điều hướng co giãn theo màn hình

Tình huống phổ biến nhất trong mọi website: trên điện thoại, menu điều hướng thu gọn thành nút hamburger (ba gạch ngang). Trên màn lớn hơn, menu hiện ra ngang đầy đủ.

Cách làm cụ thể với hướng viết min-width:

• CSS mặc định (cho điện thoại): ẩn danh sách menu, hiện nút hamburger.
• Khi màn rộng ≥768px: @media (min-width: 768px) hiện danh sách menu dạng flex, ẩn nút hamburger.

Trang có layout dạng lưới cũng dùng cơ chế tương tự: trên điện thoại hiện một cột, trên máy tính bảng hai cột, trên máy tính ba cột. CSS Grid kết hợp media query xử lý rất gọn, chỉ cần đổi giá trị của grid-template-columns trong mỗi breakpoint. Nếu bạn đang tìm hiểu CSS Grid, bài CSS Grid là gì giải thích cụ thể hơn về thuộc tính này.

Một điểm ít ai biết: không phải breakpoint nào cũng tính bằng pixel. Media query về màu sắc hay tỉ lệ pixel không liên quan đến chiều rộng, nhưng CSS3 cho phép kết hợp nhiều điều kiện khác nhau trong một câu @media bằng từ khóa and.

Nếu bạn không phải developer, cần quan tâm điều gì

Việc viết media query là công việc của đội kỹ thuật, nhưng hiểu khái niệm giúp bạn truyền đạt yêu cầu rõ hơn và nghiệm thu đúng hơn.

Khi thiết kế website: xác định trước trang sẽ trông ra sao trên điện thoại, trên máy tính bảng và trên máy tính. Thiết kế mẫu đủ ba phiên bản giúp đội kỹ thuật biết chính xác cần viết media query ở ngưỡng nào và kết quả mỗi ngưỡng trông như thế nào, tránh phải suy đoán rồi làm lại.

Khi nghiệm thu website: bạn có thể kiểm tra responsive bằng cách thu hẹp cửa sổ trình duyệt từ rộng xuống hẹp, hoặc nhấn F12 (DevTools) và chuyển sang chế độ responsive view. Giao diện cần đọc được và dùng được ở mọi kích thước, không chỉ ở màn hình đầy đủ.

Về mặt thứ hạng tìm kiếm: Google gán nhãn “not mobile-friendly” cho trang chỉ tối ưu màn máy tính. Trang thiếu responsive mất thứ hạng trên kết quả tìm kiếm điện thoại, nơi chiếm hơn 60% lượt truy cập toàn cầu theo thống kê của Statcounter (tháng 6/2025). Media query là nền tảng kỹ thuật để trang đạt tiêu chí mobile-friendly của Google.

Nếu bạn cũng quan tâm đến ảnh vector không vỡ nét khi thu phóng trang web, bài SVG là gì giải thích tại sao định dạng này phù hợp hơn PNG cho logo và biểu tượng trên mọi kích thước màn hình.

Câu hỏi thường gặp về media query

Có phải viết media query trong file CSS riêng không?
Không bắt buộc. Bạn có thể viết trong cùng file CSS chính, trong thẻ <style> trong HTML, hoặc trong file CSS riêng tải kèm điều kiện media (<link rel="stylesheet" media="(min-width: 768px)" href="desktop.css">). Phần lớn dự án gộp chung vào một file CSS để giảm số request.

Media query có làm chậm trang không?
Bản thân media query không làm chậm. Trình duyệt tải toàn bộ file CSS nhưng chỉ áp dụng phần phù hợp điều kiện. Tác động tốc độ đáng kể hơn đến từ kích thước file CSS tổng và hình ảnh chưa được tối ưu.

Một phần tử có thể có nhiều media query không?
Hoàn toàn được. Cùng một phần tử có thể có CSS mặc định và nhiều khối media query ở các breakpoint khác nhau. Quy tắc cascade và specificity của CSS vẫn áp dụng bình thường.

Đã dùng Bootstrap hay Tailwind rồi, còn cần học media query không?
Nên học. Biết media query giúp bạn hiểu framework đang làm gì bên dưới và tùy chỉnh khi cần. Khi layout của framework không đáp ứng yêu cầu thiết kế cụ thể, bạn cần tự viết thêm bên trên. Nhiều dự án thực tế dùng framework làm nền và bổ sung media query tùy chỉnh cho phần riêng biệt.

Nếu bạn đang lên kế hoạch làm website tương thích tốt trên nhiều thiết bị, bài về dịch vụ thiết kế website responsive của Web22 mô tả quy trình và phạm vi công việc cụ thể từ thiết kế đến bàn giao.