Sử dụng cơ bản về Responsive Web Design

“Responsive Web Design” đây có thể nói là khái niệm tương đối lạ đối với chúng ta cũng như trong thời gian gần nó mới được phát triển, hiển nhiên Responsive Web Design là một công nghệ web mới, tuy nhiên nó là gì và mang lại lợi ích thiết thực gì đối với việc phát triển web của chúng ta.

Như các bạn đã biết, với tốc độ phát triển của các thiết bị công nghệ cầm tay như: iPhone, iPad, MacBook, Laptop … Và phát triển ở mọi ứng dụng cũng như hệ điều hành rất đa dạng và phong phú như: Android, iOS, Windows phone … Và các bạn biết là chúng ta mua điện thoại hay các thiết bị đó về sử dụng để có thể nghe nhạc, xem phim, chơi game … và một tính năng quan trọng là để lướt web.

Responsive Web Design

Lúc này đã có vấn đề đặt ra là tất cả các độ phân giải màn hình đa dạng đó thì chỉ hiển thị một giao diện web duy nhất là trên desktop làm cho người dùng khó khăn cho việc xem thông tin từ đó. Tạo một cảm giác khó chịu chúng ta phải kéo qua kéo lại, kéo tới lui mới xem được các thông tin trên nó từ đó Responsive Web Design mới ra đời.

Responsive là gì?

Responsive: là một công nghệ thiết kế giao diện website hay còn gọi là Responsive Web Design, mà nó có thể co giãn theo độ phân giải của màn hình hiển thị.

Thế mạnh của Responsive

Responsive Web Design là một điều tất yếu phải có trong thời đại bây giờ. Tuy là nói chạy trên nhiều chế độ phân giải màn hình tuy nhiên bạn chỉ cần một CSDL, một layout website tất cả chỉ là CSS làm việc.

Có thể nói Responsive Web Design sẽ làm cho website chạy tốt trên mọi thiết bị di động, tăng tính tương thích cho website của bạn, tạo độ tin cậy và sự chuyên nghiệp với khách hàng.

uu the cua responsive web design

Bạn có thể sử dụng Responsive Web Design ở bất kỳ dự án website nào, bằng bất kỳ ngôn ngữ thiết kế nào, hay bất kỳ một mã nguồn mở nào cũng được vì cốt lõi của nó chỉ là HTML và CSS.

Ứng dụng đơn giản Responsive Web Design

Nói về độ phân giải màn hình: hiện này các thiết bị cảm ứng có thể sẽ rất nhiều cở màn hình và hiển nhiên chúng có thể xoay hình ảnh cũng như website bạn 360 độ. Vậy làm sao để xác định được và sẽ code cho hợp lý.

Hii thật ra thì không ai làm được chuyện đó cho đến thời điểm này. Người ta phân ra các cở màn mình chuẩn cơ bản và set theo đó màn làm việc. Và hiển nhiên là theo nguyên tắt nàm hình lớn hơn sẽ chạy được cở nhỏ hơn! 😀 điều đó là hiển nhiên cho đến khi đúng thì set cho nó kiểu đó. Các bạn có thể hiểu như thế cho đơn giản.

Độ phân giải màn hình thường gặp: 320px, 480px, 600px, 768px, 900px, 1200px, 1680px, 1050px …. có thể xep thành các cặp như: 320 x 480, 1024 x 768, 1680 1050 …

cac co man hinh thong dung trong responsive

Thực hành Responsive Web Design cơ bản

Đầu tiên bạn tạo cho mình một project html đơn giản, gồm 1 file HTML và 1 file CSS sau đó và file HTML thêm vào đoạn code sau trong thẻ DEAD.

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

Tiếp theo ngay sau dưới dòng code vừa thêm cho vào đoạn sau:

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

Cái này dùng để fix trên các trình duyệt IE, có thể dùng thay thế bằng http://code.google.com/p/css3-mediaqueries-js/ hay https://github.com/scottjehl/Respond vẫn chạy tốt.

Chúng ta sẽ phát thảo giao diện bao gồm một header, content, sidebar, footer. và chúng ta sẽ responsive với các cở màn hình như: 1024px, 980px, 700px, 480px,..

Giao dien phat thao Responsive Web Design

Giao diện phát thảo Responsive Web Design

Bắt đầu code CSS, các bạn phải tìm hiểu về CSS trước khi vào bài này nha! mình sẽ không đề cập gì thêm về cơ bản nữa, trước hết trong file CSS của mình sẽ vẽ ra các định dạng giao diện chung, giao diện này sẽ là màu, font và các kích thước mà không phù hợp với bất kỳ chuẩn Responsive nào sẽ dùng đến. Bạn kéo xuống dưới cùng download file demo của bài này nha.

<!--
@media screen and (max-width: 1024px) {
   //Tùy chỉnh của kích thước 1024px
}

@media screen and (max-width: 980px) {
   //Tùy chỉnh của kích thước 980px
}

@media screen and (max-width: 650px) {
   //Tùy chỉnh của kích thước 650px
}

@media screen and (max-width: 480px) {
   //Tùy chỉnh của kích thước 480px
}
-->

Các bạn cứ tưởng tượng các câu @media screen … như một mệnh đề if trong lập trình C nếu ở chế độ màn hình nào thì mình tùy chỉnh giao diện cho màn hình đó 😀 cái khó ở đây là phải phù hợp mọi giao diện với nhau phối hợp nhịp nhàng. Làm sao suy tình cho đỡ tốn công sức, hạn chế dùng nhiều DIV phải suy nghĩ DIV đó nếu sử dụng có bị thừa hay không, nếu không có giao diện có đạt như mong muốn mình không …

Cấu trúc trong file HTML mình làm demo là thế này:

<!--
<html>
	<head>
	</head>
	<body>
		<div class="wrap">
			<div class="header">
				<h1>LOGO</h1>
				<div class="nav">
					<ul>
						<li></li>						
					</ul>
				</div>
			</div>
			<div class="content">
				<h2></h2>
				<p>
				</p>
			</div>
			
			<div class="sidebar">
				<h3>Sidebar</h3>
				<p></p>
			</div>
			<div class="footer">
				<h3>&copy; BCDONLINE.NET</h3>
			</div>
		</div>
	</body>
</html>
-->

Do đó bạn sẽ tham khảo các responsive trong file CSS sẽ là như thế này:

<!--
/* Media Queries */

/* 3 cot */
@media screen and (max-width: 1024px) {
	.wrap{width:95%;}
		.header{float:left;width:20%;}
			.header h1{float:none;}
			.nav{float:none;}
				.nav li{float:none;}
		.content{width:50%;}
		.sidebar{width:30%;}
}	
/* 2 cot */
@media screen and (max-width: 980px) {	
	.header{float:none;width:100%;}
		.header h1{float:left;}
		.nav{float:right;}
			.nav li{float:left;}
	.content{width:65%;}
	.sidebar{width:35%;}
}
/* 1 cot */
@media screen and (max-width: 650px) {	
	.header{text-align:center;}
		.header h1{float:none;}
		.nav{float:none;width:100%;}
			.nav ul{margin:0 auto;width:100%;}
		.content{width:100%;}
		.sidebar{width:100%;}
}
/* mobile */
@media screen and (max-width: 480px) {
	.nav ul{width:100%;}
		.nav li{width:100%;}
	.sidebar{display:none;}
}
-->

Như thế sẽ ra được giao diện trên các thiết bị di động như: DEMO RESPONSIVE WEB DESIGN BCDONLINE.NET

DOWNLOAD FILE VÍ DỤ VỀ RESPONSIVE WEB DESIGN

Kết luận: Sử dụng cơ bản về Responsive Web Design là vấn đề quan trọng trong việc thiết kế web hiện đại cũng vì thế nó luôn được phát triển và là một công nghệ web khá là khó, bài viết mang tính chất giới thiệu với các bạn Responsive Web Design và một ứng dụng cơ bản của nó, các bạn cần tìm hiểu nhiều hơn để sử dụng được nó và dần lên Responsive CSS Framework các bạn chờ các bài viết sau nha! Hứa hẹn nhiều điều thú vị. Chúc thành công.

VN:F [1.9.22_1171]
Rating: 10.0/10 (4 votes cast)
Sử dụng cơ bản về Responsive Web Design, 10.0 out of 10 based on 4 ratings
Share This