[caption id="attachment_1542" align="aligncenter" width="660"]
Giao diện thích ứng với kích thước màn hình[/caption]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ụ:
[sourcecode language="css"]
@media screen and (min-width:500px) { ... }
[/sourcecode]
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">
<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:
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:
[sourcecode language="css"]
@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;
}
}
[/sourcecode]
Ở đâ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.
