Bài viết này sẽ giúp các bạn hình dung được cách cơ bản tạo một website
với giao diện responsive design. Xu hướng thiết kế website trong năm 2014
và những năm tới sẽ là responsive web vì sự bùng nổ của các thiết bị công
nghệ thông minh như smartphone và máy tính bảng.
Còn bây giờ hãy mở editor ra và bắt tay vào code ngay nào.
Đầu tiên hãy bắt đầu với code HTML cơ bản nào<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″/>
<title> Demo | Responsive Web</title>
<script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<script type=’text/javascript’ src=’scripts/respond.min.js’></script>
</head>
<body>
<div id=”wrapper”>
<header>
<nav id=”skipTo”>
<ul>
<li><a href=”#main” title=”Skip to Main Content”>Skip to Main Content</a></li>
</ul>
</nav>
<h1>Demo</h1>
<nav>
<ul>
<li><a href=”#” title=”Home”>Home</a></li>
<li><a href=”#” title=”About”>About</a></li>
<li><a href=”#” title=”Work”>Work</a></li>
<li><a href=”#” title=”Contact”>Contact</a></li>
</ul>
</nav>
<div id=”banner”><img src='' class='imgloading' data-original=”images.jpg” alt=”banner” /></div>
</header>
<section id=”main”>
<h1>Thiết kế website SEA GEM</h1>
<p>Content 1</p>
</section>
<aside>
<h1>Thiết kế website SEA GEM - Sự lựa chọn của bạn</h1>
<p>Content 2</p>
</aside>
</div>
</body>
</html>Các
yếu tố quan trọng của sự linh hoạt trong thiết kế đáp ứng là chiều rộng
linh hoạt.Tất cả bạn cần làm là tạo ra một vỏ bọc, nội dung, và độ rộng
cột sẽ thích ứng với độ rộng của các thiết bị khác nhau. Điều đó không
có gì mới, nhưng bây giờ quan trọng hơn bao giờ hết. Để giữ cho mọi thứ
đơn giản, tôi sẽ chỉ cho bạn cách để tạo ra một trang linh hoạt bao gồm
navigation bar,hình ảnh và tính năng hai cột, trong đó có xem xét bố trí
trên các thiết bị có kích thước khác nhau. Bạn sẽ nhận thấy tôi đã
include respond.min.js nó là một chuỗi các javascript cho phép truy vấn
phương tiện truyền thông để làm việc trong IE6-8.
Ý tưởng để thực hiện
responsive design
đó là dùng CSS để thiết lập chiều rộng của các thành phần tưởng ứng với
chiều rộng của các thiết bị người dùng.Có một vấn đề chính khi chuyển
đổi từ độ rộng cố định sang dạng linh hoạt đó là chiều rộng của ảnh.Bạn
có thể dễ dàng làm điều này trong CSS của bạn chỉ cần thiết lập chiều
rộng của ảnh là 100%.
Dưới đây là code CSS style cho trang trên/* Structure */
#wrapper { width: 96%; max-width: 920px; margin: auto; padding: 2%; }
#main {width: 60%; margin-right: 5%; float: left;}
aside {width: 35%;float: right;}
/* Logo H1 */
header h1 {height: 70px; width: 160px; float: left; display:
block;background: url(https://seagem.vn/images/demo.gif) 0 0 no-repeat; text-indent:
-9999px; }
/* Nav */
header nav {float: right; margin-top: 40px; }
header nav li { display: inline; margin-left: 15px;}
#skipTo { display: none;}
#skipTo li {background: #b1fffc;}
/* Banner */
#banner {float: left; margin-bottom: 15px; width: 100%;}
#banner img {width: 100%;}Sử
dụng hình ảnh lớn có thể ảnh hưởng đến thời gian tải, do đó trên khung
nhìn nhỏ hơn, nơi họ là không cần thiết có một phương pháp đáp ứng hình
ảnh mà bạn sẽ phát hiện người sử dụng kích thước màn hình và kéo trong
hình ảnh nhỏ hơn / lớn hơn tùy thuộc vào những gì là cần thiết. Hiện vẫn
còn một số thách thức lớn với phương pháp này nhưng vẫn còn giá trị xem
xét. Mat Marquis, một thành viên của nhóm jQuery mobile, đã viết một
bài viết tuyệt vời về phương pháp này và ông giải thích những ưu và
khuyết điểm như sau
Lý do chính mà bạn có thể muốn chuyển đổi từ
giao diện cố định là do thu hẹp có thể trở thành không thể đọc được và
khó bấm. Bằng cách sử dụng phương pháp này, bạn đang cho phép người dùng
truy cập dễ dàng hơn. Bạn cũng sẽ nhận thấy trong mã mà chúng tôi đã
thực hiện một số thay đổi đối với các phần #main và sang một bên để
chuyển đổi chúng cho một cột.
Để cho phép truy vấn phương tiện
truyền thông của bạn có hiệu lực đầy đủ một trang web di động tối ưu hóa
điển hình có chứa đoạn code sau (nhét vào head tag)
<meta name=”viewport” content=”width=device-width, minimum-scale=1.0, maximum-scale=1.0″ />Code CSS cho các thiết bị di động/* Media Queries */
@media screen and (max-width: 480px)
{
#skipTo {display: block;}
header nav, #main, aside {float: left; clear: left; margin: 0 0 10px; width: 100%;}
header nav li {margin: 0;background: #efefef; display: block; margin-bottom: 3px;}
header nav a {display: block;padding: 10px; text-align: center;}
}Bạn
sẽ thấy trên một số thiết bị di động trang web của bạn sẽ tự động co
bản thân để phù hợp với màn hình. Để test thành quả vừa rồi các bạn có
thể upload lên host rồi dùng các thiết bị di dộng để test hoặc đơn giản
hơn các bạn có thể dùng trình duyệt của mình. Hãy mở trên firefox,chrome
rồi thu nhỏ trình duyệt bạn sẽ thấy website tự co giãn theo.
Các bạn tự hỏi Reponsive
design là gì? Lợi ích có thể đem lại từ reponsive design hãy xem thêm
bài viết
Responsive design là gì ?Trên đây là phần hướng dẫn tạo
responsive web design hy vọng rằng mọi người thấy có ích với bài viết này.
