Media Query là gì ?
Media Query là một trong những module mới được thêm vào trong CSS3. Nó là một sự cải thiện của Media Type đã có từ CSS2, bằng việc thêm vào những cú pháp query để ta có thể đáp ứng được cho nhiều device với nhiều kích cỡ màn hình khác nhau. là một trong những module mới được thêm vào trong CSS3. Nó là một sự cải thiện của Media Type đã có từ CSS2, bằng việc thêm vào những cú pháp query để ta có thể đáp ứng được cho nhiều device với nhiều kích cỡ màn hình khác nhau.
Module Media Query hiện đã được implement đầy đủ trong các trình duyện hiện đại như Webkit, Firefox, Opera hay IE [kể từ version 9].
Tại sao lại sử dụng Media Query
Hiện tại đang là thời điểm bùng nổ của các thiết bị di động. Máy tính để bàn hay laptop không còn là những phương tiện duy nhất giúp mọi người có thể truy cập vào website của bạn.
Người ta có thể dùng điện thoại, hay tablet ...
Và vấn đề phát sinh khi mà những thiết bị với kích cỡ màn hình nhỏ bé truy cập vào trang web của bạn.
Kích cỡ chữ trở nên quá nhỏ bé. Việc zoom out có thể giải quyết được vấn đề nhưng zoom out sẽ đồng nghĩa với việc phát sinh ra nhiều chỗ cần scroll một cách không cần thiết Việc phải load những hình ảnh có kích cỡ quá lớn dẫn đến giảm tốc độ load trang web trên thiết bị di động. Trong khi đáng ra với những màn hình kích cỡ nhỏ như vậy thì ta chỉ cần hiện thị những tấm hình có kích cỡ nhỏ hơn. Một trong những cách giải quyết trước đây đã từng được sử dụng rộng rãi đó là việc thiết kế view riêng cho những thiết bị moblie, và những view này được access qua một domain khác [hoặc là subdomain]. Những request được gửi tới website sẽ được check xem là từ thiết bị nào, nếu là thết bị mobile thì sẽ bị redirect sang domain được tạo riêng như đã nói ở trên.
Ngoài việc phải tạo ra script để xác nhận thiết bị truy cập thì cách giải quyết ở trên còn gặp phải một nhược điểm khác nữa đó là ta luôn phải tạo ra 2 view khác nhau cho cùng một trang, và mỗi khi cần tay đổi một nội dung gì đó thì ta cần phải thay đổi cả hai.
Và Media Query ra đời đã giúp những nhà lập trình viên giải quyết được những vấn đề trên. Media Query có thể giúp ta nhận biết được thiết bị truy cập thông qua những thuộc tính của nó. Media Query giúp chúng ta áp dụng những CSS rules khác nhau cho những thiết bị có khích cỡ màn hình khác nhau. Từ đó ta có thể đạt được mục đích của mình đó là hiện thị những nội dung khác nhau [cả hình ảnh, hay text] với những thiết bị khác nhau.
Media Type
Trước khi tìm hiểu về cú pháp của Media Query, trước hết ta hãy nói qua về Media Type trước.
Media Type vốn đã có từ CSS2, nó giúp ta xác định định dạng của mỗi loại thiết bị. Tất cả các giá trị của Media Type bao gồm
- All: Dùng cho tất cả các loại Media Type
- Aural: Dùng cho speech and sound synthesizers
- Braille: Dùng cho các devices liên quan đến chữ nổi [braille]
- Embossed: Dùng cho các loại máy in các trang braille
- Handheld: Dùng cho các thiết bị nhỏ, thiết bị cầm tay
- Print: Dùng cho máy in
- Projection: Dùng cho các loại máy chiếu
- Screen: Dùng cho computer screen
- Tty: Dùng cho các thiết bị sử dụng fixed-pitch character grid
- Tv: Dùng cho các loại TV
Ta có thể sử dụng Media Type theo cú pháp sau đây:
/*Áp dụng cho những browser có chiều rộng = 600px*/
@media [min-width: 600px] { body {font-size: 14px;} }
/*Áp dụng cho những browser có chiều rộng >= 800px*/
@media [min-width: 800px] { body {font-size: 15px;} }
/*Áp dụng cho những browser có chiều rộng = 800px*/
@media [min-width: 800px] { body {font-size: 15px;} }
/*Áp dụng cho những browser có chiều rộng = 800px*/
@media [min-width: 800px] { body {font-size: 15px;} }
/*Áp dụng cho những browser có chiều rộng = 800px*/
@media [min-width: 800px] { body {font-size: 15px;} }
/*Áp dụng cho những browser có chiều rộng = 800px*/
@media [min-width: 800px] { body {font-size: 15px;} }
/*Áp dụng cho những browser có chiều rộng = 800px*/
@media [min-width: 800px] { body {font-size: 15px;} }
/*Áp dụng cho những browser có chiều rộng = 800px*/
@media [min-width: 800px] { body {font-size: 15px;} }
/*Áp dụng cho những browser có chiều rộng = 800px*/
@media [min-width: 800px] { body {font-size: 15px;} }
/*Áp dụng cho những browser có chiều rộng = 800px*/
@media [min-width: 800px] { body {font-size: 15px;} }
/*Áp dụng cho những browser có chiều rộng = chiều rộng, hay là landscape [quay ngang: chiều dài < chiều rộng]. Ví dụ/*Áp dụng khi device để dọc*/
@media [orientation: portrait] { body {font-size: 14px;} }
/*Áp dụng khi device để ngang*/
@media [orientation: landscape] { body {font-size: 15px;} }
- Ngoài ra còn một số features khác, mà có thể ít được sử dụng hơn, đó là
@media [color] { body {font-size: 14px;} }
1, @media [color] { body {font-size: 14px;} }
2, @media [color] { body {font-size: 14px;} }
3, @media [color] { body {font-size: 14px;} }
4 và @media [color] { body {font-size: 14px;} }
5
/*Áp dụng cho màn hình màu*/
@media [color] { body {font-size: 14px;} }
/*Áp dụng cho màn hình có ít nhất 256 màu*/
@media [min-color-index: 256] { body {font-size: 15px;} }
Ta có thể ghép nhiều media feature vào trong một câu lệnh kiểm tra bằng toán tử
@media [color] { body {font-size: 14px;} }
6 hoặc @media [color] { body {font-size: 14px;} }
7 [mang ý nghĩa của phép or]. Ngoài ra ta cũng có thể sử dụng @media [color] { body {font-size: 14px;} }
8 hoặc @media [color] { body {font-size: 14px;} }
9.
Khi ta viết
@media [color] { body {font-size: 14px;} }
như ở trên thì do
/*Áp dụng cho những browser có chiều rộng = 600px*/
@media [min-width: 600px] { body {font-size: 14px;} }
/*Áp dụng cho những browser có chiều rộng >= 800px*/
@media [min-width: 800px] { body {font-size: 15px;} }
/*Áp dụng cho những browser có chiều rộng =800px và =1200px */
@media [orientation: landscape], [device-min-width: 1200px] { body {font-size: 15px;} }
/*Áp dụng cho màn hình có tỉ lệ không phải là 4/3*/
@media not [device-aspect-ratio: 4/3] { body {font-size: 15px;} }
Sử dụng Media Query hiệu quả
Có 3 cách để sử dụng Media Query. Cách thứ nhất, như đã đề cập ở phía trước, đó là sử dụng từ khoá
@media all and [color] { body {font-size: 14px;} }
1 để tính toán rules bên trong một stylesheet:@media [expression] { body {font-size: 15px} }
Cách thứ hai đó là khai báo trong tag link với thuộc tính là media. Như vậy ta có thể gọi đến hẳn mốt stylesheet bên ngoài.
Cách thứ 3 đó là sử dụng từ khoá
@media all and [color] { body {font-size: 14px;} }
2 để load một external stylesheet bên trong một external stylesheet./*Áp dụng cho những browser có chiều rộng = 600px*/
@media [min-width: 600px] { body {font-size: 14px;} }
/*Áp dụng cho những browser có chiều rộng >= 800px*/
@media [min-width: 800px] { body {font-size: 15px;} }
/*Áp dụng cho những browser có chiều rộng = 800px*/
@media [min-width: 800px] { body {font-size: 15px;} }
/*Áp dụng cho những browser có chiều rộng