Ứng dụng của Responsive Web Design khi thiết kế website phần 2

CSS3 hỗ trợ tất cả các loại thiết bị truyền thông tương tự như CSS 2.1 , chẳng hạn như màn hình , in ấn và thiết bị cầm tay , nhưng đã có thêm hàng chục tính năng hỗ trợ phương tiện truyền thông mới , bao gồm cả chiều rộng tối đa , thiết bị rộng , định hướng và màu sắc. Thiết bị mới được thực hiện sau khi phát hành CSS3 ( chẳng hạn như iPad và các thiết bị Android ) chắc chắn sẽ hỗ trợ tính năng truyền thông . Vì vậy,một phương tiện truyền thông truy vấn sử dụng CSS3 sẽ nhắm tới mục tiêu các thiết bị này làm việc tốt , và nó sẽ bị bỏ qua nếu truy cập bằng trình duyệt máy tính cũ không hỗ trợ CSS3.

Trong bài viết của Ethan Marcotte , chúng ta thấy một ví dụ về một truy vấn phương tiện truyền thông :

< linkrel="stylesheet"type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css"/>

Phương tiện truyền thông truy vấn này là khá tự giải thích : nếu trình duyệt hiển thị trang này trên một màn hình (chứ không phải in ấn, vv ) , và nếu chiều rộng của màn hình ( không nhất thiết phải là khung nhìn) là 480 pixel hoặc thấp hơn , sau đó tải shetland . css .

Tính năng mới của CSS3 cũng hỗ trợ Thiết kế web bao gồm định hướng ( chân dung so với cảnh quan ) , thiết bị rộng , min- thiết bị - chiều rộng và nhiều hơn nữa . Nhìn vào "Định hướng truyền thông truy vấn " để biết thêm thông tin về thiết và hạn chế chiều rộng dựa trên các tính năng truy vấn phương tiện truyền thông .

Người ta có thể tạo ra nhiều phong cách , cũng như thay đổi cách bố trí cơ bản được xác định để phù hợp với phạm vi của độ rộng - ngay cả đối với cảnh quan so với chân dung định hướng . Hãy chắc chắn để xem xét các phần của bài viết Ethan Marcotte mang tên " Gặp gỡ các phương tiện truyền thông truy vấn " cho thêm các ví dụ và giải thích kỹ lưỡng hơn .

Các truy vấn nhiều phương tiện truyền thông cũng có thể được giảm xuống đúng vào một phong cách duy nhất, đó là lựa chọn hiệu quả nhất khi được sử dụng :

/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

/* Styles */

}

/* Smartphones (landscape) ----------- */

@media only screen and (min-width : 321px) {

/* Styles */

}

/* Smartphones (portrait) ----------- */

@media only screen and (max-width : 320px) {

/* Styles */

}

Đoạn mã trên là từ một mẫu miễn phí cho nhiều phương tiện truyền thông truy vấn giữa các thiết bị phổ biến Andy Clark.

Vấn đề về CSS3 media trong Thiết kế web:

Min-width và max-width là thuộc tính cụ thể được yêu cầu trong media.

Lưu ý trong ví dụ dưới đây chúng ta đang sử dụng cú pháp cho các truy vấn phương tiện truyền thông có thể sử dụng tất cả trong một phong cách trang. Như đã đề cập ở trên, cách hiệu quả nhất để sử dụng phương tiện truyền thông truy vấn là đặt tất cả chúng trong một CSS, với phần còn lại của phong cách cho trang web. Bằng cách này, nhiều yêu cầu không cần phải được thực hiện cho nhiều phong cách.

@media screen and (min-width: 600px){

.hereIsMyClass{ width:30%; float: right;}
}

Các lớp học quy định trong các meida query trên (hereIsMyClass) sẽ chỉ làm việc nếu trình duyệt hoặc chiều rộng màn hình là trên 600 điểm ảnh. Nói cách khác, phương tiện truyền thông truy vấn này sẽ chỉ chạy nếu chiều rộng tối thiểu là 600 điểm ảnh (do đó, 600 pixels hoặc lớn hơn).

@media screen and (max-width: 600px){

.aClassforSmallScreens{ clear: both; font-size:1.3em;}

}

Và bây giờ max-width sẽ chỉ áp dụng cho các trình duyệt có chiều rộng màn hình trên 600px hoặc hẹp hơn.

Đôi khi chúng ta muốn sử dụng một thiết bị chiều rộng đặc biệt:

@media screen and (max-device-width: 480px){

.classForiPhoneDisplay{ font-size:1.2em; }

}

@media screen and (min-device-width: 768px){

.minimumiPadWidth{ clear: both; margin-bottom:2px solid #ccc; }

}

Ngoài ra có thể kết hợp:

@media screen and (min-width: 800px) and (max-width: 1200px){

.classForaMediumScreen{ background:#cc0000; width:30%; float: right;}

}

Xác định media query trong một thẻ liên kết HTML tiêu chuẩn trong Thiết kế web:

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

< linkrel="stylesheet"media="screen and (min-width: 600px)"href="large.css"/>

< linkrel="stylesheet"media="print"href="print.css"/>