Home / Kiến thức / HTML/CSS / CSS3: Media screen

CSS3: Media screen

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.

CSS3: Media screen

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.

<span style="color: #0000ff;">@media</span> <span style="color: #ff0000;">screen</span> and (<span style="color: #800080;">max-width:</span> <span style="color: #800000;">600px</span>) { <span style="color: #0000ff;">.class</span> <span style="color: #00ff00;">{</span> <span style="color: #800080;">background:</span> <span style="color: #800000;">#ccc;</span> <span style="color: #00ff00;">}</span> }

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

&lt;<span style="color: #0000ff;">link</span> <span style="color: #0000ff;">rel</span>="<span style="color: #ff0000;">stylesheet</span>" <span style="color: #0000ff;">media</span>="<span style="color: #ff0000;">screen</span> and <span style="color: #339966;">(</span><span style="color: #800080;">max-width</span><span style="color: #800080;">:</span> <span style="color: #800000;">600px</span><span style="color: #339966;">)</span>" <span style="color: #0000ff;">href</span>="<span style="color: #ff0000;">small.css</span>" /&gt;

Độ 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

<span style="color: #0000ff;">@media</span> <span style="color: #ff0000;">screen</span> and <span style="color: #339966;">(</span><span style="color: #800080;">min-width:</span> <span style="color: #800000;">900px</span><span style="color: #339966;">)</span> <span style="color: #00ff00;">{</span> <span style="color: #0000ff;">.class</span> <span style="color: #00ff00;">{</span> <span style="color: #800080;">background:</span> <span style="color: #800000;">#666;</span> <span style="color: #00ff00;">}</span> <span style="color: #00ff00;">}</span>

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.

<span style="color: #0000ff;">@media</span> <span style="color: #ff0000;">screen</span> and <span style="color: #339966;">(</span><span style="color: #800080;">min-width:</span> <span style="color: #800000;">600px</span><span style="color: #339966;">)</span> and <span style="color: #339966;">(</span><span style="color: #800080;">max-width:</span> <span style="color: #800000;">900px</span><span style="color: #339966;">)</span> { <span style="color: #0000ff;">.class</span> { <span style="color: #800080;">background:</span><span style="color: #800000;"> #333;</span> } }

Độ 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.

<span style="color: #0000ff;">@media</span> <span style="color: #ff0000;">screen</span> and <span style="color: #339966;">(</span><span style="color: #800080;">max-device-width:</span> <span style="color: #800000;">480px</span><span style="color: #339966;">)</span> { <span style="color: #0000ff;">.class</span> { <span style="color: #800000;">background:</span> <span style="color: #800000;">#000;</span> } }

Định dạng cho iPhone4

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

&lt;<span style="color: #0000ff;">link</span> <span style="color: #0000ff;">rel</span>="<span style="color: #ff0000;">stylesheet</span>" <span style="color: #0000ff;">media</span>="<span style="color: #0000ff;">only screen</span> and (<span style="color: #800080;">-webkit-min-device-pixel-ratio:</span> <span style="color: #800000;">2</span>)" <span style="color: #0000ff;">type</span>="<span style="color: #ff0000;">text/css</span>" <span style="color: #0000ff;">href</span>="<span style="color: #ff0000;">iphone4.css</span>" /&gt;

Đị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).

&lt;<span style="color: #0000ff;">link rel</span>="<span style="color: #ff0000;">stylesheet</span>" <span style="color: #0000ff;">media</span>="<span style="color: #0000ff;">all</span> and (<span style="color: #800080;">orientation:</span><span style="color: #800000;">portrait</span>)" <span style="color: #0000ff;">href</span>="<span style="color: #ff0000;">portrait.css</span>"&gt;
&lt;<span style="color: #0000ff;">link</span> <span style="color: #0000ff;">rel</span>="<span style="color: #ff0000;">stylesheet</span>" <span style="color: #0000ff;">media</span>="<span style="color: #0000ff;">all</span> and (<span style="color: #800080;">orientation:</span><span style="color: #800000;">landscape</span>)"<span style="color: #0000ff;"> href</span>="<span style="color: #ff0000;">landscape.css</span>"&gt;

About quocbb

Chào bạn đến với blog của Quocbb.com. Blog mình làm đơn giản chỉ để lưu lại những kiến thức đã học được và muốn cùng chia sẻ với cho mọi người. Mình thích chơi Bida, đánh Cờ tướng, WarCraft, nếu bạn có chung sở thích hãy để lại comment nhé

Leave a Reply

Your email address will not be published. Required fields are marked *