CSS Media Queries

Media query
Media query

Media queries là một tính năng của CSS. Nó cho phép nội dung của trang web thay đổi linh hoạt trên các màn hình có kích thước và độ phân giải khác nhau.

Media Types

Media type được giới thiệu ở phiên bản thứ 2 của CSS. Với cú pháp @media chúng ta có thể chỉ định những files hay rules CSS cụ thể cho một loại thiết bị. Ví dụ: Chúng ta có 1 trang web hiển thị hóa đơn cho người dùng. Và chúng ta muốn, khi người dùng xem trên web nó sẽ có 1 giao diện khác, khi in ra sẽ có giao diện khác. Với media types, chúng ta có thể dễ dàng thực hiện điều đó.

Với media types, chúng ta có thể quy định CSS cho một số thiết bị như:

  • all
  • print
  • screen
  • speech
  • tty
  • tv
  • projection
  • handheld
  • braille
  • embossed
  • aural

Tuy nhiên, tính năng này có vẻ không được thành công lắm. Bởi lẽ chỉ có 2 loại phương tiện mà các nhà sản xuất quan tâm và hỗ trợ tính năng này. Đó là: screenprint. Các thiết bị như tv, projection, handheld… nhận được ít sự quan tâm của lập trình viên hơn. Trong danh sách thiết bị được liệt kê phía trên, hiện tại chỉ còn 4 thiết bị (in đậm) còn được hỗ trợ.

Media Queries

Module media queries được giới thiệu lần đầu vào tháng 6/2012. Trong giai đoạn này, phần cứng có nhiều phát triển vượt bậc. Các thông số về độ phân giải, kích thước trở nên đa dạng. Song song với sự phát triển của máy tính, các thiết bị di động như iPod, iPhone…vv cũng trở thành một biểu tượng.

Sản phẩm của Apple năm 2012
Sản phẩm của Apple năm 2012

Media queries là một tính năng được kế thừa và phát triển từ media types. Ý tưởng chính cho việc nâng cấp là: “thay vì quan tâm đó là thiết bị gì, chúng ta chỉ quan tâm đến các thuộc tính quan trọng của nó“.

Để rõ ràng hơn, chúng ta có thể tưởng tượng, thay vì phải quan tâm trang web của mình hiển thị như thế nào khi hiển thị trên 1 cái laptop và trên 1 cái ipad. Chúng ta chỉ quan tâm, trang web của mình sẽ hiển thị như thế nào, trên một màn hình 13 inches full HD. Còn việc cái màn hình đó nằm trên thiết bị nào (iPad, laptop hay PC hoặc thậm chí là LCD quảng cáo) không phải là vấn đề.

Cú pháp media query

Media query là một tập hợp các truy vấn, chúng có thể bao gồm:

  • Media type (optional)
  • Một vài biểu thức media features

Các mệnh đề truy vấn media type và media features được kết hợp với nhau bởi các toán tử logic. Trong media query, cú pháp sẽ không phân biệt chữ hoa và chữ thường.

Khi mệnh đề truy vấn trả về kết quả True. Trình duyệt sẽ áp những CSS rules bên trong cho tài liệu HTML.

Mệnh đề truy vấn media type

Tương tự với media types ở CSS2. Tuy nhiên, ở CSS3 chúng ta chỉ có thể truy vấn 1 trong 4 loại: all, screen, print và speech.

Media features

Media features mô tả đặc điểm của người dùng bao gồm các thông số:

  • any-hover
  • any-pointer
  • aspect-ratio
  • color
  • color-gamut
  • color-index
  • display-mode
  • forced-colors
  • grid
  • height
  • hover
  • inverted-colors
  • light-level
  • monochrome
  • orientation
  • overflow-block
  • overflow-inline
  • pointer
  • prefers-color-scheme
  • prefers-contrast
  • prefers-reduced-motion
  • prefers-reduced-transparency
  • resolution
  • scan
  • scripting
  • update
  • width

Media features hỗ trợ rất nhiều thuộc tính. Nhưng ở mức độ căn bản, chúng ta chỉ cần quan tâm chủ yếu đến 4 thuộc tính in đậm phía trên:

  • width: độ rộng của viewport
  • height: độ cao của viewport
  • resolution: độ phân giải của màn hình (mật độ của các điểm ảnh)
  • orientation: hướng của thiết bị (giành cho các thiết bị di động, chúng ta có thể xoay ngang và xoay dọc)
Orientation
Orientation

Các toán tử logic

Chúng ta có thể kết hợp nhiều mệnh đề bằng các toán tử logic. Media query hỗ trợ các toán tử and, not, only và , (comma)

Câu truy vấn đầu tiên

Câu truy vấn media có rất nhiều biến thể, nó phụ thuộc vào tình huống trong thực tế của bạn. Do đó, mình không thể liệt kê tất cả được mà chỉ liệt kê một vài trường hợp cơ bản. Để quen dần với media query, chúng ta cần thực hành nhiều hơn.

Ví dụ 1: Câu truy vấn đơn giản

Ban đầu, chúng ta có rule h1 với thuộc tính color có giá trị ‘red’. Sau đó, chúng ta sử dụng media query với điều kiện ‘min-width: 992px‘. Chúng ta gán lại giá trị color với giá trị ‘blue’. Nếu biểu thức min-width: 992px trả về True. Rule CSS bên trong sẽ được trình duyệt thực thi.

Biểu thức ‘min-width: 992px‘ có nghĩa là độ rộng của viewport  >= 992px, thì biểu thức này trả về True. Ngoài min-width, chúng ta cũng có thể sử dụng biểu thức max-width với cách thức tương đương.

Các bạn có thể xem cách trình duyệt hiển thị tại đây. Nếu các bạn mở ví dụ bằng bằng laptop hoặc PC có màn hình lớn hơn 992px. Tiêu đề sẽ có màu xanh. Nhưng khi các bạn kéo nhỏ cửa sổ trình duyệt web lại. Tiêu đề sẽ chuyển sang màu đỏ.

Ví dụ 2: Kết hợp 2 biểu thức truy vấn

Các bạn có thể thấy, rule CSS của chúng ta cũng tương tự phía trên. Bình thường tiêu đề có màu đỏ và khi biểu thức truy vấn media trả về True. Tiêu đề sẽ chuyển sang màu đỏ. Điều khác biệt là mình sử dụng toán tử and để kết hợp 2 biểu thức truy vấn lại với nhau. Nếu các bạn gặp khó khăn với các biểu thức logic, chúng ta nên ôn tập toán lại một chút.

Để xem cách thức biểu thức truy vấn này hoạt động, các bạn có thể truy cập vào đây. Mở devtools và sử dụng chức năng giả lập của trình duyệt web. Chọn thiết bị là iPad Pro (hoặc iPad).

Giả lập thiết bị di động với Devtools
Giả lập thiết bị di động với Devtools

Để giải lập được, chúng ta sẽ cần mở Devtools của trình duyệt. Ở vị trí (1), chúng ta có thể kích hoạt chế độ giả lập các thiết bị di động. Ở vị trí (2) chúng ta có thể chọn các thiết bị có sẵn (nếu trong danh sách của bạn không có iPad hoặc iPad Pro, chúng ta có thể chọn ‘Edit‘ tìm và thêm các thiết bị đó vào). Ở vị trí (3) chúng ta có thể xoay hướng thiết bị.

Để ý chúng ta sẽ thấy, màn hình iPad Pro có kích thước 1024×1366 px. Vậy dùng để màn hình đứng (portrait) hay ngang (landscape) thì mệnh đề (min-width: 768px) luôn đúng. Do đó, kết quả của câu truy vấn sẽ phụ thuộc vào mệnh đề còn lại ‘(orientation: landscape)‘ sẽ quyết định giá trị.

Công việc còn lại của các bạn là sử dụng button chức năng (vị trí 3) để thay đổi hướng của thiết bị và xem màu sắc của tiêu đề thay đổi.