Truy vấn media nguồn http://weboz.com.vn/

- tháng 12 12, 2014

Trước đây, CSS2 cho phép bạn ấn định stylesheet nào sẽ dùng cho từng thiết bị tương ứng( màn hình hay máy in chẳng hạn). Bây giờ CSS3 thậm chí còn làm được nhiều hơn thế nhờ khả năng truy vấn thiết bị(media queries).

Bạn chỉ cần thêm câu lệnh điều kiện để kiểm tra và áp dụng cho các stylesheet khác nhau. Ví dụ, bạn có 2 stylesheet khác nhau, định dạng thứ nhất dùng cho màn hình cỡ lớn, định dạng thứ hai dùng cho điện thoại di động.

Khả năng này của CSS3 thực sự hữu dụng, vì nó cho phép mẫu thiết kế của bạn có khả năng hiển thị trên các thiết bị và độ phân giải màn hình khác nhau. Bạn hãy đọc phần hướng dẫn sau đây và lướt qua một số site đã áp dụng tốt khả năng truy vấn media của CSS3.

Truy vấn media CSS3

Kiểm tra bản demo, định lại kích thước cửa sổ trình duyệt để xem nó biến đổi ra sao.

Độ rộng tối đa

Nếu độ rộng vùng hiển thị nhỏ hơn 600px, câu lệnh CSS sau sẽ được thực hiện.

@media screen and (max-width: 600px) { .class { background: #ccc; } }

Nếu muốn liên kết đến 1 file stylesheet, chèn dòng mã sau vào trong thẻ <head>.

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Độ rộng tối thiểu

Lệnh CSS sau sẽ được thực thi khi vùng hiển thị lớn hơn 900px

@media screen and (min-width: 900px) { .class { background: #666; } }

Kết hợp các lệnh truy vấn media

Bạn có thể sử dụng kết hợp nhiều câu lệnh truy vấn với nhau. Đoạn mã CSS sau sẽ thực hiện khi vùng hiển thị nằm trong khoảng 600px và 900px.

@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; } }

Độ rộng thiết bị

Lệnh sau đây sẽ thực hiện khi độ rộng màn hình thiết bị lớn nhất là 480px. Lưu ý: độ rộng thiết bị tối đa ám chỉ độ phân giải thực của thiết bị, còn độ rộng tối đa ám chỉ độ phân giải của vùng hiển thị thông tin.

@media screen and (max-device-width: 480px) { .class { background: #000; } }

Định dạng cho iPhone4

Lệnh sau áp dụng cho iPhone4( Thomas Maier).

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)"type="text/css" href="iphone4.css" />

Định dạng cho iPad

Sử dụng lệnh sau để phát hiện hướng của màn hình(xoay ngang hay dọc), (Cloud Four).

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Áp dụng cho Internet Explorer

IE8 và các phiên bản cũ hơn không hỗ trợ truy vấn media. Dưới đây là một số giải pháp khắc phục:

Tìm hiểu một số site mẫu

Bạn xem các site sau dùng các trình duyệt hỗ trợ truy vấn media, ví dụ Firefox, Chrome hoặc Safari.

Hicksdesign

Cỡ lớn: 3 cột sidebar
Cỡ Vừa: 2 cột sidebar
Nhỏ: 1 cột sidebar
Rất nhỏ: không sidebar (logo & cột phải đưa lên trên còn các cột khác di chuyển xuống dưới)

Colly

Mẫu thiết kế chuyển đổi giữa 1 cột, 2 cột và 4 cột phụ thuộc vùng hiển thị của trình duyệt.

A List Apart

Cỡ lớn: menu trên cùng
Vừa : menu bên trái, 3 cột hiển thị ảnh
Nhỏ: không ảnh nền trên logo, 3 cột hiển thị ảnh.

Tee Gallery

Mẫu này gần giống mẫu bên trên, nhưng sự khác biệt ở chỗ ảnh được tự động định lại kích thước. Thủ thuật ở đây là dùng trị phần trăm thay vì pixel( ví dụ width=100%).

Lời kết

Bạn lưu ý rằng việc tối ưu mẫu thiết kế cho thiết bị di động không đồng nghĩa site của bạn sẽ tối ưu cho thiết bị di động. Muốn tối ưu thực sự, hình ảnh và các câu lệnh phải được cắt gọn để giảm kích thước nạp trang. Các truy vấn media chỉ giúp hiển thị thông tin chứ không phải để tối ưu hóa.

Tìm kiếm Blog này

Sưu tầm