Hư Trúc Blog

Với sự phát triển nhanh chóng của máy tính bảng, điện thoại thông minh, .. thì nhu cầu duyệt web trên các thiết bị này càng nhiều. Trước đây, một website thường dùng giải pháp tạo thêm trang thích nghi với điện thoại. VD: bạn có domain domain.com thì trang cho điện thoại là m.domain.com chẳng hạn. Hiện nay chúng ta không cần phải phiền phức như vậy nữa. Giải pháp cho chúng ta là Responsive Design. Vậy, Responsive Design là gì? và cách áp dụng nó vào trang web của tôi như thế nào?

Responsive Design là gì?

Responsive Design là một khái niệm để chỉ cho việc website của bạn có thể tự co giản kích thước các thành phần trên trang web của bạn để hiển thị tốt nhất trên các loại kích thước màn hình như desktop, laptop, table,mobile,…

Responsive Web Design

Áp dụng vào trang web của tôi

Đầu tiên bạn thêm thẻ meta viewport vào thẻ < head>:

< meta name="viewport" content="width=device-width, initial-scale=1.0">

Với các trình duyệt IE cũ không hổ trợ media query. Chúng ta sử dụng media-queries.js hoặc respond.js để hổ trợ IE.

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Để dễ dàng, thiết kế của bạn nên có những khối, mảng rõ ràng. VD tôi có một trang đơn giản (xem ví dụ) gồm

• #wrap:bao toàn bộ code
• #header: tên trang web,….
• #content: nội dung chính
• #sidebar: các widget,…
• #footer: thông tin bản quyền,…

Bây giờ, chúng ta dựa vào các thống kê để xác định các kích thước màn hình thường truy cập trang chúng ta nhiều nhất. VD: 1240px, 980px, 700px, 480px,..

Đây là mẫu phác thảo layout khi hiển thị với từng kích thước màn hình.

Mẫu phác thảo cho các kích thước màn hình

Ở CSS3, nó đã bổ sung thêm nhiều khai báo mới như max-width, device-width,… cho media type.

Khi độ rộng màn hình lớn nhất là 1240px thì hiển thị 3 cột:

/* 3 cot */
@media screen and (max-width: 1240px) {
#wrap{width:95%;}
#header{float:left;width:10%;}
#content{width:60%;}
#sidebar{width:30%;}
}

Hiển thị 2 cột cho 980px hoặc nhỏ hơn.

/* 2 cot */
@media screen and (max-width: 980px) {
#header{float:none;width:100%;}
#content{width:65%;}
#sidebar{width:35%;}
}

Ơ đây chúng ta cho float của #header là none; để #header không còn chạy về bên trái nữa và đặt lại độ rộng của header là 100%.

Tương tự với màn hình 700px thì hiển thị 1 cột.

/* 1 cot */
@media screen and (max-width: 700px) {
#content{width:100%;}
#sidebar{width:100%;}
}

Trong trường hợp này, độ rộng 100% bạn không cần quan tâm đến float, nó bay về bên nào vẫn vậy

Với màn hình 480px hiển thị 1 cột và ẩn sidebar

/* mobile */
@media screen and (max-width: 400px) {
#sidebar{display:none;}
}

Để ẩn sidebar chúng ta sử dụng display:none

Demo Download

Lưu ý: Khi thiết kế bạn nên thiết kế trang cho kích thước lớn nhất rồi nhỏ dần. Như VD của HT với màn hình lớn hơn 1240px sẽ hiển thị như lúc đầu do trong đó không có code cho kích thước lớn hơn 1240px.

Chúc bạn áp dụng tốt vào trang web của bạn.

P/s: Theme HT đang sử dụng chưa hoàn chỉnh nên không phải là một ví dụ tốt đâu nhé