RWD đơn giản với CSS và DIV

Mobility đang trở thành xu thế trong thế giới CNTT, cùng với nó là sự ra đời của nhiều thiết bị cá nhân có khả năng kết nối Internet. Điều này đòi hỏi những nhà thiết kế website cần xây dựng ra những trang web có layout (bố cục) đẹp, dễ dùng với bất cứ thiết bị nào có khả năng truy cập trang web của họ. Reponsive Web Design (RWD) ra đời với mục tiêu giải quyết bài toán này. Trong bài viết “Tạo Layout đơn giản với DIV và CSS” đăng trên Tạp chí Lập trình, tôi đã hướng dẫn các bạn sử dụng DIV kết hợp với CSS để làm layout cho một trang web. Qua hướng dẫn này bạn sẽ dễ dàng và nhanh chóng có được một trang web có giao diện được thiết kế với layout như sau:

Tuy vậy layout theo hướng dẫn này chỉ phù hợp và thể hiện được tốt về mặt nội dung\giao diện với những màn hình máy tính có độ phân giải trên 1000px. Với những màn hình có độ phân giải nhỏ hơn, và đặc biệt là các thiết bị di động có kích thước nhỏ có khả năng truy cập Internet như smartphone, tablet, v.v. hoặc bạn phải quan sát layout trên với kích cỡ rất nhỏ (zoom) hoặc phải kéo thanh trượt ngang trên trình duyệt để quan sát được tất cả các nội dung ở kích cỡ lớn. Qua bài viết này tôi sẽ hướng dẫn bạn một chút thay đổi với CSS để bạn có thể có layout phù hợp với những màn hình có kích thước\độ phân giải khác nhau. Cụ thể ta trong bài viết này tôi sẽ có hướng dẫn để bạn thiết kế layout với các kích thước màn hình sau:

• Màn hình có độ phân giải trên 1000px (laptop\screen đời mới, v.v.) sẽ như ảnh trên
• Màn hình có độ phân giải tối đa là 1000px (laptop\screen đời cũ, v.v.)

• Màn hình có độ phân giải tối đa là 750px (laptop nhỏ\tablet lớn, v.v.)

• Màn hình có độ phân giải tối đa là 540px (tablet nhỏ, v.v.)

• Màn hình có độ phân giải tối đa là 380px (smartphone, v.v.)

Sau đây tôi sẽ hướng dẫn các bạn các bước căn bản nhất để có thể tạo được các layout với DIV và CSS có thể đáp ứng được các màn hình khác nhau kể trên.

Trước hết bạn cần tạo mới một trang HTML với cấu trúc chuẩn (gồm đầy đủ các phần html, head, title, body). Tiếp theo bạn code đoạn mã HTML sau vào phần body của trang.

<div id="main">
<div id="head">

</div>
<div id="head-link">

</div>
<div id="s-body">
<div id="left">

</div>
<div id="content">

</div>
<div id="right">

</div>
</div>
<div id="footer">

</div>
</div>
 

Các cặp thẻ trong đoạn mã trên giúp bạn tạo ra các phân vùng khác nhau trên trang HTML của mình, mỗi phân vùng được đánh ID riêng biệt (các ID này sẽ  dùng để định nghĩa CSS), chi tiết như sau:

1. main: Phân vùng chứa toàn bộ nội dung của trang.
2. head: Phân vùng chứa nội dung đầu tiên của trang (theo VD trên đó là  phần logo)
3. head-link: Phân vùng chứa các liên kết đầu trang (ở VD trên: Home, About us, Contact us, v.v.)
4. s-body: phần nội dung chính

• left: Phân vùng chứa các nội dung bên trái (ở VD trên là các liên kết trái)
• content: Phân vùng chứa các nội dung chính của trang (ở VD trên là các phân vùng thông tin như: Hot news, Photo Slide, News 1, v.v.)
• right: Phân vùng chứa các thông tin bên phải trang (ở VD trên là lịch, biểu đồ, bản đồ)

5. footer: Phân vùng chứa các thông tin cuối trang (ở VD trên là thông tin về chủ sở hữu và các liên kết)

Có một số kỹ thuật dành cho RWD, tuy nhiên trong bài này tôi hướng dẫn các bạn sử dụng kỹ thuật đơn giản với CSS, đó là Media Queries. Trước hết ta cần đưa vào tệp CSS một selector căn bản dành cho thẻ body dùng để đặt một cố định kiểu chung cho toàn bộ trang.

 body{
margin:0 auto;
font-family: Arial, Tahoma;
}
#s-body{
float: left;
}

#head, #head-link, #s-body, #footer{
width: 100%;
margin-bottom:5px;
clear: both;
}
 

Tiếp theo ta cần đưa vào tệp này các “media query” tương ứng với 5 loại màn hình với độ phân giải được xác định ở trên. Sử dụng media query đòi hỏi bạn cần xác định tất cả các kích cỡ màn hình thông dụng mà mình muốn trang web có khả năng hiển thị tốt trên đó (ở đây tôi chỉ xác định ra 5 loại màn hình). Theo cách mà tôi hướng dẫn bạn có thể tùy thích bổ sung thêm những kích cỡ mà mình mong muốn.

/* Tất cả các màn hình có độ phân giải thấp nhất là 1001px */
@media all and (min-width: 1001px){
body{
background-color: red;
}
}

/* Màn hình có độ phân giải tối đa 1000px */
@media screen and (max-width: 1000px) {
body{
background-color: green;
}
}

/* Màn hình có độ phân giải tối đa 750px */
@media screen and (max-width: 750px) {
body{
background-color: blue;
}
}

/* Màn hình có độ phân giải tối đa 540px */
@media screen and (max-width: 540px) {
body{
background-color: yellow;
}
}

/* Màn hình có độ phân giải tối đa 380px */
@media screen and (max-width: 380px) {
body{
background-color: orange;
}
}

Trong đoạn mã CSS trên tôi cố tình đưa thêm vào mỗi media query một selector dành cho thẻ body với mục đích để bạn có thể kiểm tra thử với các chế độ màn hình khác. Bạn không cần phải có đủ các loại màn hình (5 loại) như đã kể trên, để kiểm tra bạn có thể chạy trang web của mình trên một trình duyệt bất kỳ và thay đổi từ từ kích cỡ cửa sổ trình duyệt cho tới khi thấy đổi sang các màu tương ứng với độ phân giải được xác định ở trên. Kết quả bạn sẽ nhận được như thế này:

Vậy là CSS đã giúp ta có thể xác định được kích thước màn hình thông qua media query, rất đơn giản và tiện lợi phải không bạn?

Bây giờ tới lúc ta xác định độ rộng vùng không gian cho các phần tử nằm trong thẻ body tùy theo độ rộng của màn hình lần lượt từ lớn tới nhỏ như sau (5 loại kích cỡ):

• 980px
• 850px
• 600px
• 450px
• 360px

Tiếp đó ta xác định vùng không gian của phần tử div với id là head, với mỗi kích thước khác nhau ta điều chỉnh lại chiều cao của vùng head cho phù hợp (chiều cao chuyển từ 100px, 80px, v.v.. và thấp nhất là 30px). Bây giờ ta cùng nhau xem lại hiện trạng của tệp CSS dành cho trang web (tôi đã loại bỏ các thuộc tính về màu nền đã dùng để dễ nhận biết kích thước như đã đề cập ở trên):

body{
margin:0 auto;
font-family: Arial, Tahoma;
}

#s-body{
float: left;
}

#head, #head-link, #s-body, #footer{
width: 100%;
margin-bottom:5px;
clear: both;
}

/* Tất cả các màn hình có độ phân giải trên 1000px */
@media all and (min-width: 1001px){
body{
width: 980px;
}

#head{
height: 100px;
background-color: #F5F5F5;
border: 1px solid #CDCDCD;
}
}

/* Màn hình có độ phân giải tối đa 1000px */
@media screen and (max-width: 1000px) {
body{
width: 850px;
}

#head{
height: 80px;
background-color: #F5F5F5;
border: 1px solid #CDCDCD;
}
}

/* Màn hình có độ phân giải tối đa 750px */
@media screen and (max-width: 750px) {
body{
width: 600px;
}

#head{
height: 60px;
background-color: #F5F5F5;
border: 1px solid #CDCDCD;
}
}

/* Màn hình có độ phân giải tối đa 540px */
@media screen and (max-width: 540px) {
body{
width: 450px;
}

#head{
height: 40px;
background-color: #F5F5F5;
border: 1px solid #CDCDCD;
}
}

/* Màn hình có độ phân giải tối đa 380px */
@media screen and (max-width: 380px) {
body{
width: 360px;
}

#head{
height: 30px;
background-color: #F5F5F5;
border: 1px solid #CDCDCD;
}
}

Nếu quan sát trang trên trình duyệt và thay đổi kích thước bạn sẽ thấy vùng head có độ rộng và chiều cao thay đổi theo.

Cùng với cách thức trên bạn có thể lần lượt định kiểu cho các thành phần khác của trang với kích thước phù hợp với mỗi độ rộng màn hình. Theo lời khuyên của các chuyên gia về RWD, bạn nên chia màn hình của mình thành 12 cột, căn cứ vào đó để xác định mỗi thành phần sẽ chiếm bao nhiêu cột khi có sự thay đổi về kích thước của màn hình. Dưới đây là tất cả các mã CSS mà tôi dùng để định kiểu cho các thành phần tương ứng với mỗi kích thước màn hình khác nhau; đó là cách phân chia của tôi nó có thể khác hoàn toàn với cách phân chia của các bạn; tôi chỉ mong đó là một ý tưởng giúp bạn nắm được cách làm và áp dụng cho bài toán cụ thể của mình.

body{
margin:0 auto;
font-family: Arial, Tahoma;
}
#s-body{
float: left;
}

#head, #head-link, #s-body, #footer{
width: 100%;
margin-bottom:5px;
clear: both;
}
/* Tất cả các màn hình có độ phân giải trên 1000px */
@media all and (min-width: 1001px){
body{
width: 980px;
font-size: 14px;
}

#head{
height: 100px;
background-color: #F5F5F5;
border: 1px solid #CDCDCD;
}

#head-link{
height: 30px;
line-height: 30px;
border: 1px solid #CDCDCD;
background-color: #F5F5F5;
}

#left{
width: 160px;
min-height: 400px;
border: 1px solid #004C00;
float:left;
background-color: #004C00;
}

#content{
width: 640px;
min-height: 400px;
border: 1px solid #CDCDCD;
float:left;
margin-left: 5px;
}

#right{
width: 165px;
min-height: 400px;
border: 1px solid orange;
float:right;
margin-right: -2px;
background-color: orange;
}

#footer{
height: 50px;
clear: both;
border: 1px solid #000;
background-color: #000;
}

}

/* Màn hình có độ phân giải tối đa 1000px */
@media screen and (max-width: 1000px) {
body{
width: 850px;
font-size: 13px;
}

#head{
height: 80px;
background-color: #F5F5F5;
border: 1px solid #CDCDCD;
}

#head-link{
height: 30px;
line-height: 30px;
border: 1px solid #CDCDCD;
background-color: #F5F5F5;
}

#left{
width: 160px;
min-height: 300px;
border: 1px solid #004C00;
float:left;
background-color: #004C00;
}

#content{
width: 510px;
min-height: 300px;
border: 1px solid #CDCDCD;
float:left;
margin-left: 5px;
}

#right{
width: 165px;
min-height: 300px;
border: 1px solid orange;
float:right;
margin-right: -2px;
background-color: orange;
}

#footer{
height: 30px;
clear: both;
border: 1px solid #000;
background-color: #000;
}
}

/* Màn hình có độ phân giải tối đa 750px */
@media screen and (max-width: 750px) {
body{
width: 600px;
font-size: 12px;
}

#head{
height: 60px;
background-color: #F5F5F5;
border: 1px solid #CDCDCD;
}

#head-link{
height: 20px;
line-height: 20px;
border: 1px solid #CDCDCD;
background-color: #F5F5F5;
}

#left{
width: 160px;
min-height: 300px;
border: 1px solid #004C00;
float:left;
background-color: #004C00;
}

#content{
width: 432px;
min-height: 300px;
border: 1px solid #CDCDCD;
float:right;
margin-right: -2px;
clear: right;
}

#right{
display: none;
visibility: hidden;
}

#footer{
height: 30px;
clear: both;
border: 1px solid #000;
background-color: #000;
}
}

/* Màn hình có độ phân giải tối đa 540px */
@media screen and (max-width: 540px) {
body{
width: 450px;
font-size: 10px;
}

#head{
height: 40px;
background-color: #F5F5F5;
border: 1px solid #CDCDCD;
}

#head-link{
height: 15px;
line-height: 15px;
border: 1px solid #CDCDCD;
background-color: #F5F5F5;
}

#left{
width: 160px;
min-height: 200px;
border: 1px solid #004C00;
float:left;
background-color: #004C00;
}

#content{
width: 282px;
min-height: 200px;
border: 1px solid #CDCDCD;
float:right;
margin-right: -2px;
clear: right;
}

#right{
display: none;
visibility: hidden;
}

#footer{
height: 25px;
clear: both;
border: 1px solid #000;
background-color: #000;
}
}

/* Màn hình có độ phân giải tối đa 380px */
@media screen and (max-width: 380px) {
body{
width: 360px;
font-size: 10px;
}

#head{
height: 30px;
background-color: #F5F5F5;
border: 1px solid #CDCDCD;
}

#head-link{
height: 12px;
line-height: 12px;
border: 1px solid #CDCDCD;
background-color: #F5F5F5;
}

#left{
width: 100%;
min-height: 40px;
border: 1px solid #004C00;
background-color: #004C00;
clear: both;
margin-bottom: 5px;
}

#content{
width: 100%;
min-height: 200px;
border: 1px solid #CDCDCD;
clear: both;
float: left;
margin: 0px;
}

#right{
display: none;
visibility: hidden;
}

#footer{
height: 20px;
clear: both;
border: 1px solid #000;
background-color: #000;
}
}

Mời bạn quan sát layout của trang web với thiết kế CSS mà tôi đã sử dụng ở trên ở các độ rộng màn hình khác nhau (ở đây tôi thay đổi độ rộng của sổ trình duyệt để kiểm tra).

Bạn có thể thấy layout chuyển từ 3 cột (độ rộng của các phần lớn) sang 2 cột (phần right bị biến mất khi màn hình nhỏ) và cuối cùng là về 1 cột trên những màn hình có kích thước từ 380px trở xuống.

Lúc này bạn có thể tiếp tục với việc xây dựng layout (bố cục) trong phần content như bản mẫu ta có phía trên để có được một trang web với layout đáp ứng RWD.

Chúc bạn sớm thành thạo RWD! Khi đó nhớ phản hồi hoặc chia sẻ sản phẩm của bạn với tôi nhé :o)

Bạn có thể tải ví dụ mẫu ở trên tại đây.

Nguyễn Việt Khoa