Responsive web design (RWD) – Thiết kế giao diện web thích ứng với kích thước màn hình thiết bị

Ngô Tường Dân Asp.Net, CSS, JSP, php,

Trước đây để có thể hiển thị nội dung website của mình trên các thiết bị di động thi giải pháp được sử dụng là tạo thêm một website phiên bản di động, như giờ thi với phương pháp thiết kế giao diện thích ứng (Responsive web design) chúng ta hoàn toàn có thể sắp xếp nội dung trên trang web của chúng ta tùy theo màn hình thiết bị mà không cần phải viết thêm một website phiên bản di động nữa.

Giao diện thích ứng với kích thước màn hình
Giao diện thích ứng với kích thước màn hình

Demo môn học PHP tại CUSC

Responsive web design (RWD) hiểu một cách đơn giản là chúng ta sẽ bố trí lại nội dung của trang web tùy theo kích thước màn hình của thiết bị (hình trên). Nói là bố trí lại vì Responsive web design (RWD) chỉ đơn thuần là ẩn/hiện hay sắp xếp trật tự của nội dung trên trang mà thôi.

Với sự hỗ trợ của CSS3 (Media Queries năm 2012) và HTML5 thì phương pháp thiết kế này trở nên rất dễ thực hiện.
Ví dụ:

@media screen and (min-width:500px) { ... }

Giúp xác định kích thước của màn hình thiết bị và ràng buộc nếu nhỏ hơn 500px thì nội dung ở giữa sẽ được thực hiện. Như vậy chúng ta chỉ việc đặt tên cho các phần tử nội dung (html element) trên trang và xử lý chúng là được.

<html xmlns="http://www.0w3.org/1999/xhtml"&gt;
<head>
<!–viewport xac dinh kich thuot dung theo man hinh–>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" type="image/ico" href="images/favorite.ico">
<title>Salomon shop</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="header">
<h1>SALOMON</h1>
</div>
<div id="Skin_Menu_Ngang">
<ul id="nav">
<li><a href="?home">TRANG CHỦ</a></li>
<li style="border-right: 0px"><a href="?function=dk">ĐĂNG KÝ</a></li>
</ul>
</div>
<div id="noidung">
<div id="cotPhai"> Cot phai </div>
<div id="cotTrai"> cot trai </div>
</div>
<div id="footer"> Footer </div>
</div>
</body>
</html>

Chúng ta có giao diện như sau:
salomon1

Lưu ý dòng

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

Giúp xác định tỉ lệ scale và qui đổi điểm ảnh của màn hình thiết bị về px.
Ví dụ code css cho Demo môn học PHP tại CUSC như sau:

@media  screen and (max-width: 800px) {
#main {
	width:100%;
}

#header {
	width: 100%;	
	background-image:none;
	text-align:center;
	vertical-align:middle;
	height:70px;
}

#header h1{
	visibility:visible;
	display:inline-block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:xx-large;
	color:#FFF;
} 

#trinhdon {
	width: 100%;
}
#footer {
	width: 100%;
}
#noidung {
	width: 100%;
}
#cotTrai {
	width: 100%;
}
#cotPhai {
	width: 100%;
}
}

@media screen and (max-width: 600px) {
#main {
	width: 100%;
}
#nav
{
	display:none;
}
#header {
	width: 100%;	
	background-image:none;
	text-align:center;
	vertical-align:middle;
	height:70px;
}

#header h1{
	display:inline-block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:xx-large;
	color:#FFF;
} 

#trinhdon {
	width: 100%;
}
#footer {
	width: 100%;
}
#noidung {
	width: 100%;
}
#cotTrai {
	width: 100%;
}
#cotPhai {
	width: 100%;
}
}
 @media screen and (max-width:480px) {
#nav
{
	display:none;
}
#main {
	width: 100%;
}
#header {
	width: 100%;	
	background-image:none;
	text-align:center;
	vertical-align:middle;
	height:70px;
}

#header h1{
	display:inline-block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:xx-large;
	color:#FFF;
} 
#trinhdon {
	width: 100%;
}
#footer {
	width: 100%;
}
#noidung {
	width: 100%;
}
#cotTrai {
	width: 100%;
}
#cotPhai {
	text-align:center;
	width: 100%;
	display:inline;
}
}

Ở đây tôi qui định nếu màn hình kích thướt lớn hơn 800px thì chúng ta có giao diện web trên máy tính với header và nội dung bố trí mặc định. Nếu lớn hơn 600px và nhỏ hơn 800px thì bố trí lại 02 phần trái phải theo chiều dọc, …

Gần đây Chrome hỗ trợ chức năng test giao diện trên các thiết bị động.
1. Nhấn F12 để vào chế độ developer
2. Chọn vào hình điện thoại ở của sổ code
3. Thay đôi kích thước màn hình bằng thướt đo hay chọn thiết bị.

Hi vọng là bài viết này có ích cho các bạn sinh viên tìm hiểu một cách căn bản nhất.

Phản hồi