Responsive web design: Khái niệm và ứng dụng

Trong thời buổi mà hàng loạt đồ chơi công nghệ khủng ra đời, đồng nghĩa nhu cầu duyệt web trên các thiết bị di động ngày càng cao, điều này đòi hỏi lập trình viên phải tính đến chuyện trang web của mình sẽ hiển thị ra sao trên các màn hình có độ rộng khác nhau như vậy. Do đó mà người ta đưa ra khái niệm Responsive Web Design – RWD

hiển thị trên các màn hình có kích thước khác nhau. Việc hiển thị như vậy giúp người dùng xem nội dung trang web một cách thoải 1. Responsive Web Design là gì?

Một cách tổng quát, RWD giúp chúng ta phát triển website có khả năng tự động thay đổi bố cục khi mái mà không cần phải cuộn ngang màn hình nhiều lần.

Ví dụ trên màn hình có độ rộng là 1000px, trang web được bố cục như sau:

Khi độ rộng màn hình là 320px thì trang web sẽ được bố cục lại:

Khái niệm RWD được đề xuất bởi Ethan Marcotte trong cuốn sách cùng tên. RWD đề cập tới 3 vấn đề chính là: Flexible layout, Flexible images và Media Queries

2. Flexible layout – Giao diện mềm dẻo

Một vài năm trước khái niệm flexible layout (giao diện mềm dẻo) là một thứ gì đó xa xỉ đối với website. Thứ duy nhất mềm dẻo trong website chính là độ dài của các đoạn text và số lượng các cột. Nhưng với RWD thì chúng ta sẽ cố gắng làm mọi thứ “mềm dẽo”. Hình ảnh là thứ dễ làm vỡ giao diện website của bạn nhất do đó cái đầu tiên ta cần làm cho “mềm dẻo” chính là kính thước ảnh. Khi kích thước màn hình nhỏ thì kích thước của ảnh cũng phải được làm nhỏ lại để hình ảnh đó không phá vỡ cấu trúc website. Tuy nhiên, hình ảnh không phải là thứ duy nhất flexible, bạn phải quan tâm đến rất nhiều thứ khác như độ rộng các thành phần, khoảng cách giữa các thành phần, kích thước chữ, … Với RWD, bạn phải luôn nhớ rằng là chúng ta đang xây dựng 1 website chứ không phải đang làm một tác phẩm in ấn. Do đó mọi thứ cần được fix lại cho phù hợp với thiết bị hiển thị.

3. Flexible images

Như đã đề cập ở trên, việc hiệu chỉnh là kích thước ảnh là rất cần thiết nếu như bạn không muốn nó phá vỡ giao diện của bạn. Có rất nhiều cách để làm việc này. Cách đơn giản nhất là ta dùng thuộc tính max-width của CSS để giới hạn kích thước tối đa của ảnh (IE6 không hổ trợ thuộc tính này nhưng may mắn là các smartphone không sử dụng IE6)

img {max-width: 100%}

Một kỹ thuật nữa là sử dụng kỹ thuật được giới thiệu bởi Filament Group, theo đó thay vì resize lại ảnh thì sẽ load hẳn một ảnh khác khi cần. Kỹ thuật này giúp tiết kiệm được việc load 1 ảnh lớn không cần thiết khi người dùng truy cập website trên thiết bị có kích thước nhỏ. Có thể xem demo tại đây. Hạn chế của kỹ thuật này là ta phải có nhiều ảnh có kích thước khác nhau và phải sử dụng thêm 1 số file để điều khiển việc load ảnh.

4. Media Queries

Thực ra khái niệm media query đã được đưa ra từ CSS2. Bạn có thể tham khảo tại đây.

CSS3 hổ trợ đầy đủ các media types được định nghĩa trong CSS2 như screen, print, handheld, … và bổ sung thêm một số khai báo mới như max-width, max-device-with, orientation, color… May mắn là đa số các smartphone và tablet được làm ra sau khi CSS3 ra đời nên nó hổ trợ đầy đủ các media query (cũng may là IE trên các thiết bị này cũng vậy) nên chúng ta có thể yên tâm sử dụng thuộc tính này

@media screen and (max-width: 1024px) {
 #wrapper {width: 960px;}
 #main-content {width: 600px; float: left;}
}
@media screen and (max-width: 800px) {
 #wrapper {width: 100%; padding: 0 2px;}
}
@media screen and (max-width: 600px) {
 #main-content {width: 98%; clear: both;}
}

Bạn phải chú ý rằng, CSS trong các media queries cũng tuân theo thứ tự ưu tiên của CSS. Tức là nếu khi thiết bị thỏa điều kiện của query thì trình duyệt sẽ sử dụng CSS trong đó và xem nó giống như CSS thông thường, không hề được ưu tiên gì hơn (những CSS này vẫn có thể không được áp dụng nếu như nó có mức ưu tiên thấp hơn 1 CSS khác mô tả đến cùng 1 đối tượng đã áp dụng trước đó)

Tùy theo nhu cầu, bạn cũng có thể sử dụng min-wdith, max-device-width, min-device-width thay cho max-width. Tuy nhiên, bạn cần phải phân biệt max-width với max-device-width (tương tự min-width với min-device-width). Ví dụ, ipad có kích thước màn hình là 1024x768 tức nó có max-device-width là 1024px còn max-width của màn hình ipad thì còn tùy vào là bạn đang để ipad theo chiều nào. Vì vậy:

@media screen and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}

tương đương với

@media screen and (max-width: 768px) {
/* For portrait layouts only */
}

Và

@media screen and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}

tương đương với

@media screen and (max-width: 1024px){
/* For landscape layouts only */
}

5. Một số trang web ứng dụng RWD Hicksdesign

• Large size: 3 columns sidebar
• Smaller: 2 columns sidebar (the middle column drops to the left column)
• Even smaller: 1 column sidebar (the right column shift up below the logo)
• Smallest: no sidebar (logo & right column shift up and the other sidebar columns move below)

Colly

The layout switches between one column, 2 columns, and 4 columns depend on the viewing area of your browser.

A List Apart

• Large size: navigation at the top, 1 row of pictures
• Medium size: navigation on the left side, 3 columns of pictures
• Small size: navigation at the top, no background image on logo, 3 columns of pictures

Tham khảo Responsive web design Responsive Web Design: What It Is and How To Use It CSS3 Media Queries