Media Queries Toàn Tập: Hướng Dẫn CSS Responsive Từ A-Z

Bạn đã bao giờ thấy một website hiển thị đẹp trên laptop nhưng lại vỡ tung trên điện thoại chưa? Đó là lúc Media Queries tỏa sáng. Đây là công cụ CSS quyền năng giúp website của bạn “biến hình” để phù hợp với mọi kích thước màn hình. Trong bài viết toàn tập này, WiWeb sẽ cùng bạn tìm hiểu từ những khái niệm cơ bản nhất đến các kỹ thuật nâng cao để làm chủ hoàn toàn thiết kế web đáp ứng (responsive design).

Media Queries Là Gì?

Hãy tưởng tượng Media Queries như một người “bảo vệ” thông minh cho website của bạn. Người bảo vệ này sẽ hỏi mỗi thiết bị truy cập: “Này, màn hình của bạn rộng bao nhiêu? Bạn đang xoay dọc hay xoay ngang?”. Dựa vào câu trả lời, nó sẽ áp dụng một bộ quy tắc CSS riêng biệt để giao diện hiển thị đẹp nhất có thể.

Nói một cách kỹ thuật, Media Queries là một tính năng của CSS3 cho phép bạn áp dụng các khối CSS chỉ khi một điều kiện nhất định được thỏa mãn. Các điều kiện này thường liên quan đến kích thước, hướng xoay, hoặc độ phân giải của màn hình.

Vậy tại sao chúng lại quan trọng đến vậy trong lĩnh vực thiết kế web hiện đại? Câu trả lời rất đơn giản: sự đa dạng của thiết bị. Ngày nay, người dùng truy cập website của bạn từ vô số thiết bị:

• Điện thoại thông minh với màn hình nhỏ.
• Máy tính bảng với kích thước đa dạng.
• Máy tính xách tay.
• Màn hình máy tính để bàn cực lớn.

Nếu không có CSS media queries, bạn sẽ phải tạo ra các phiên bản website khác nhau cho từng thiết bị. Điều này cực kỳ tốn kém và khó bảo trì. Media Queries giải quyết vấn đề này một cách thanh lịch, cho phép một codebase duy nhất thích ứng với mọi môi trường. Nó chính là nền tảng cốt lõi của responsive design.

Phân Tích Cú Pháp Media Query

Để sử dụng Media Queries, trước hết bạn cần nắm vững cú pháp của nó. Nghe có vẻ phức tạp, nhưng thực chất lại rất logic và dễ hiểu. Mọi thứ đều bắt đầu với quy tắc @media.

Quy tắc @media giống như một câu lệnh if trong lập trình. Bạn nói với trình duyệt: “Này trình duyệt, nếu điều kiện sau đây là đúng, hãy áp dụng các style CSS bên trong nhé!”.

Một Media Query hoàn chỉnh thường có ba phần chính:

• Các loại Media (Media Types): Đây là nơi bạn chỉ định loại thiết bị mà quy tắc sẽ áp dụng. Các loại phổ biến nhất là:
  • screen: Dành cho màn hình máy tính, tablet, điện thoại. Đây là loại bạn sẽ sử dụng nhiều nhất.
  • print: Áp dụng khi người dùng in trang web.
  • all: Áp dụng cho tất cả các loại thiết bị. Nếu bạn không chỉ định loại nào, all sẽ là mặc định.
• Các thuộc tính Media (Media Features): Đây là các điều kiện cụ thể về thiết bị, được đặt trong dấu ngoặc đơn. Ví dụ: (max-width: 600px).
• Các toán tử Logic (Logical Operators): Chúng giúp bạn kết hợp nhiều điều kiện với nhau để tạo ra các quy tắc phức tạp hơn.
  • and: Kết hợp nhiều điều kiện. Quy tắc chỉ áp dụng khi tất cả các điều kiện đều đúng. Ví dụ: @media screen and (min-width: 900px).
  • not: Đảo ngược một điều kiện. Dùng để loại trừ. Ví dụ: @media not print (áp dụng cho mọi thứ trừ thiết bị in).
  • only: Dùng để ngăn các trình duyệt cũ không hỗ trợ media query đọc các quy tắc này. Hiện nay, only không còn quá cần thiết nhưng bạn vẫn sẽ thấy nó trong nhiều đoạn code cũ. Cú pháp only screen về cơ bản là giống với screen trên các trình duyệt hiện đại.

Các Thuộc Tính Media (Media Features) Phổ Biến Nhất

Sức mạnh thực sự của Media Queries nằm ở các thuộc tính (media features). Chúng cho phép bạn kiểm tra hầu hết mọi đặc điểm của thiết bị. Dưới đây là những thuộc tính quan trọng và được sử dụng nhiều nhất mà bạn cần nắm vững.

Kiểm soát kích thước với min-width và max-width

Đây là cặp đôi thuộc tính nền tảng trong CSS responsive tutorial. Chúng cho phép bạn áp dụng CSS dựa trên chiều rộng của viewport (khung nhìn trình duyệt).

• max-width: Áp dụng style cho các màn hình có chiều rộng tối đa là một giá trị nào đó. Rất hữu ích cho phương pháp Desktop First (thiết kế cho máy tính trước, rồi thu nhỏ lại).
  • Ví dụ: (max-width: 768px) có nghĩa là “nếu chiều rộng màn hình từ 768px trở xuống”.
• min-width: Áp dụng style cho các màn hình có chiều rộng tối thiểu là một giá trị nào đó. Đây là trụ cột của phương pháp Mobile First design.
  • Ví dụ: (min-width: 769px) có nghĩa là “nếu chiều rộng màn hình từ 769px trở lên”.

Xử lý hướng xoay thiết bị với orientation

Thuộc tính này cực kỳ hữu ích khi bạn muốn thay đổi layout lúc người dùng xoay điện thoại hoặc tablet.

• orientation: portrait: Màn hình đang ở chế độ dọc (chiều cao lớn hơn chiều rộng).
• orientation: landscape: Màn hình đang ở chế độ ngang (chiều rộng lớn hơn chiều cao).

Tối ưu cho màn hình độ phân giải cao với resolution

Các màn hình Retina của Apple hay các màn hình 4K có mật độ điểm ảnh rất cao. Thuộc tính resolution giúp bạn cung cấp hình ảnh sắc nét hơn hoặc điều chỉnh font chữ cho các màn hình này. Bạn có thể dùng đơn vị dpi (dots per inch) hoặc dppx (dots per pixel).

Ví dụ, để nhắm đến các màn hình Retina (thường là 2dppx trở lên), bạn có thể viết:

@media (min-resolution: 2dppx) {
  /* Các style dành cho màn hình độ phân giải cao */
}

Breakpoints Là Gì? Cách Thiết Lập Điểm Ngắt Hiệu Quả

Breakpoint (điểm ngắt) là các giá trị chiều rộng màn hình mà tại đó, layout website của bạn sẽ thay đổi để thích ứng. Ví dụ, khi chiều rộng màn hình giảm xuống dưới 768px, bạn có thể quyết định chuyển layout từ 3 cột thành 1 cột. 768px chính là một breakpoint.

Việc chọn media query breakpoints không có một quy tắc cứng nhắc nào. Lời khuyên tốt nhất là: Hãy để nội dung của bạn quyết định breakpoint, đừng dựa dẫm hoàn toàn vào kích thước của các thiết bị cụ thể. Tuy nhiên, có một số điểm ngắt phổ biến mà bạn có thể dùng làm điểm khởi đầu.

Các điểm ngắt (breakpoints) phổ biến cho Mobile

Đây là nhóm thiết bị có màn hình nhỏ nhất. Thường là các thiết bị có chiều rộng dưới 768px.

• Extra small devices (phones, 600px and down): @media only screen and (max-width: 600px) { ... }
• Small devices (portrait tablets and large phones, 600px and up): @media only screen and (min-width: 600px) { ... }

Thiết lập breakpoints cho Tablet

Đây là khoảng giữa, nơi layout có thể bắt đầu mở rộng ra một chút, ví dụ như hiển thị sidebar.

• Medium devices (landscape tablets, 768px and up): @media only screen and (min-width: 768px) { ... }

Breakpoints cho Desktop và các màn hình lớn hơn

Khi có nhiều không gian, bạn có thể hiển thị layout phức tạp với nhiều cột.

• Large devices (laptops/desktops, 992px and up): @media only screen and (min-width: 992px) { ... }
• Extra large devices (large laptops and desktops, 1200px and up): @media only screen and (min-width: 1200px) { ... }

Một lần nữa WiWeb muốn nhấn mạnh, hãy xem đây là những gợi ý. Cách tốt nhất là bạn hãy co giãn cửa sổ trình duyệt và xem layout của mình “bị vỡ” ở điểm nào, sau đó đặt breakpoint ngay tại đó.

Hướng Dẫn Sử Dụng Media Queries Qua Các Ví Dụ Thực Tế

Lý thuyết là vậy, nhưng cách tốt nhất để học là qua thực hành. Chúng ta hãy cùng xem một vài media query examples từ cơ bản đến nâng cao nhé.

Ví dụ cơ bản: Thay đổi màu nền và kích thước font chữ

Đây là ví dụ kinh điển nhất. Giả sử chúng ta có một body với màu nền mặc định là trắng. Chúng ta muốn đổi nó thành màu xám nhạt trên các màn hình nhỏ hơn 600px.

/* Style mặc định */
body {
  background-color: white;
  font-size: 16px;
}

/* Áp dụng cho màn hình có chiều rộng tối đa là 600px */
@media screen and (max-width: 600px) {
  body {
    background-color: #f0f0f0; /* Màu xám nhạt */
    font-size: 14px; /* Giảm cỡ chữ cho dễ đọc */
  }
}

Cách này dễ lắm, bạn thử xem!

Ví dụ trung cấp: Ẩn/hiện phần tử trên các thiết bị khác nhau

Một kịch bản rất phổ biến là ẩn một sidebar chiếm nhiều diện tích trên mobile và chỉ hiển thị nó trên desktop.

/* Sidebar sẽ bị ẩn trên màn hình nhỏ theo mặc định */
.sidebar {
  display: none;
}

/* Khi màn hình rộng từ 992px trở lên, sidebar sẽ hiện ra */
@media screen and (min-width: 992px) {
  .sidebar {
    display: block;
  }
}

Ví dụ nâng cao: Thay đổi cấu trúc layout với Flexbox hoặc Grid

Đây là lúc Media Queries thể hiện sức mạnh tối đa. Giả sử bạn có một container chứa 3 box. Trên desktop, bạn muốn chúng nằm trên cùng một hàng. Trên mobile, bạn muốn chúng xếp chồng lên nhau.

/* Thiết lập container là flexbox */
.container {
  display: flex;
  flex-direction: column; /* Mặc định xếp chồng lên nhau (Mobile First) */
}

.box {
  flex: 1; /* Để các box co giãn đều */
  padding: 20px;
}

/* Khi màn hình rộng từ 768px trở lên, chuyển sang layout hàng ngang */
@media screen and (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

Với ví dụ này, bạn có thể thấy layout đã thay đổi hoàn toàn chỉ với vài dòng CSS. Thật tuyệt vời phải không?

Các phương pháp thực hành hay nhất

Viết Media Queries hoạt động tốt là một chuyện. Viết chúng một cách gọn gàng, hiệu quả và dễ bảo trì lại là một chuyện khác. Hãy cùng WiWeb tìm hiểu các phương pháp hay nhất nhé.

Chiến lược Mobile First: Viết CSS cho di động trước

Mobile First là một triết lý thiết kế và phát triển. Thay vì bắt đầu với màn hình desktop lớn rồi tìm cách cắt gọt cho nhỏ lại, bạn làm ngược lại. Bạn viết các style cơ bản, tối giản nhất cho màn hình mobile trước. Sau đó, sử dụng min-width để thêm các style phức tạp hơn cho màn hình lớn hơn.

Phương pháp này có nhiều lợi ích:

• Code gọn hơn: Bạn chỉ “thêm vào” chứ không phải “ghi đè” các style phức tạp.
• Hiệu suất tốt hơn: Các thiết bị di động (thường có cấu hình yếu hơn) chỉ cần tải những CSS cần thiết nhất.
• Tư duy thiết kế tốt hơn: Buộc bạn phải tập trung vào những gì thực sự quan trọng trên màn hình nhỏ.

So sánh Mobile First và Desktop First

• Mobile First (Dùng min-width): Bắt đầu từ nhỏ nhất. Các quy tắc Media Query được dùng để thêm các tính năng và sự phức tạp khi màn hình lớn dần.
• Desktop First (Dùng max-width): Bắt đầu từ lớn nhất. Các quy tắc Media Query được dùng để đơn giản hóa, ẩn hoặc sắp xếp lại các phần tử khi màn hình nhỏ lại.

Ngày nay, Mobile First được coi là tiêu chuẩn của ngành.

Làm thế nào để giữ cho Media Queries của bạn gọn gàng và dễ bảo trì?

Khi dự án lớn dần, các khối @media có thể trở nên lộn xộn. Đây là vài mẹo để quản lý chúng:

• Tổ chức hợp lý: Bạn có thể đặt tất cả các Media Queries ở cuối file CSS của mình. Hoặc nếu bạn dùng preprocessor như SASS/SCSS, bạn có thể lồng các Media Queries ngay bên trong selector của chúng, giúp việc quản lý dễ dàng hơn rất nhiều.
• Sử dụng biến cho Breakpoints: Thay vì lặp lại các giá trị như 768px ở nhiều nơi, hãy định nghĩa chúng thành các biến CSS (Custom Properties) hoặc biến SASS. Khi cần thay đổi, bạn chỉ cần sửa ở một nơi duy nhất.
• Ghi chú (Comment): Đừng ngại thêm các ghi chú đơn giản để giải thích mục đích của một breakpoint. Ví dụ: /* Breakpoint for tablets and larger */.

Khả Năng Tương Thích Của Media Queries Với Trình Duyệt

Tin tốt cho các bạn lập trình viên! Media Queries (cụ thể là cấp độ 3, bao gồm các tính năng chúng ta đã thảo luận) được hỗ trợ bởi tất cả các trình duyệt hiện đại. Điều này bao gồm Chrome, Firefox, Safari, Edge và cả các trình duyệt trên di động.

Bạn có thể tự tin sử dụng Media Queries trong các dự án của mình mà không cần quá lo lắng về vấn đề tương thích. Các trình duyệt rất cũ như Internet Explorer 8 trở về trước không hỗ trợ, nhưng ngày nay chúng gần như không còn được sử dụng nữa.

Lời kết

Media Queries không chỉ là một công cụ, nó là một kỹ năng nền tảng mà bất kỳ nhà phát triển web hiện đại nào cũng cần phải thành thạo. Từ việc thay đổi một màu sắc đơn giản đến việc tái cấu trúc hoàn toàn layout, chúng mang lại cho bạn khả năng kiểm soát tuyệt đối giao diện website trên mọi thiết bị.

Hy vọng rằng qua hướng dẫn chi tiết từ WiWeb, bạn đã có một cái nhìn toàn diện và tự tin hơn khi làm việc với CSS media queries. Bạn còn thắc mắc nào về chủ đề này không? Hãy để lại bình luận bên dưới nhé!

Nếu bạn cần một website chuyên nghiệp được xây dựng trên nền tảng responsive vững chắc, WiWeb luôn sẵn sàng tư vấn. Liên hệ với chúng tôi nhé!