CSS3: Media screen

quocbb August 6, 2014 HTML/CSS No Comments

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">

Quoc's blog