Giao diện Mobile Responsive cho website

Ngày nay, do sự phát triển chóng mặt của các smartphone và tablet, nên ta cần phải làm sao cho website hiển thị tốt trên mọi thiết bị có kích thước khác nhau, bên cạnh đó cũng có nhiều người dùng không bao giờ maximize trình duyệt của họ. Để thiết kế giao diện phù hợp với mobile, có 2 cách như sau:

Cách 1: người lập trình sẽ viết code nhận diện thiết bị người dùng đang sử dụng, rồi sẽ chuyển hướng đến trang được thiết kế dành riêng cho thiết bị của họ.

Cách 2: là sử dụng responsive design, responsive là kiểu giao diện co giãn theo kích thước của cửa sổ trình duyệt hoặc một số thành phần sẽ loại bỏ khi co giãn trình duyệt. Như vậy, loại thiết kế này có thể chạy trên hầu hết các thiết bị.

Hôm nay mình sẽ trình bày cho các bạn cách thứ 2. Bài viết mình không trình bày về thiết kế giao diện Mobile Responsive cho hẳn một website mà sẽ lưu ý các bạn 2 điểm mấu chốt. Qua đó giúp bạn có thể hiểu và dễ dàng tạo hoặc sửa giao diện website đã có.

Điểm thứ nhất : Meta Tag

Tag meta viewport là điều tất yếu trong responsive layouts. Nó thiết lập màn hình theo tỷ lệ 1×1, điều này sẽ loại bỏ các chức năng mặc định từ các trình duyệt smartphone, chỉ hiển thị vừa màn hình để xem và có thể phóng to bằng thao tác tay, thêm vào trong thẻ <head>.

Trình duyệt IE8 trở xuống không hỗ trợ media query. Do đó, bạn có thể sử dụng media-queries.js hoặc respond.js để hỗ trợ.

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

Điểm thứ 2: CSS – Media Queries

Để website của bạn nhận biết được độ giãn nở, kích cỡ của trình duyệt, css3 đã cung cấp thêm truy vấn @media. Mình sẽ phân tích ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<style>
#thuvienit{
background-color: yellow;
}

@media screen and (max-width: 600px) {
#thuvienit{
background-color: red;
}
}
</style>
</head>
<body>

<p id=”thuvienit”>thuvien-it.org</p>

</body>
</html>

@media screen and (max-width: 600px) có nghĩa khi độ rộng của trình duyệt nhỏ hơn hoặc bằng 600px thì màu nền sẽ là màu vàng. Ngược lại nó sẽ là màu đỏ. Link download ví dụ phía dưới

Như vậy, tùy theo kích cỡ nhận biết được, từ đó bạn có thể tùy chỉnh các thông số css cho các class, id co giãn hoặc ẩn hiện như ý muốn. Chắc chắn bạn phải từng tiếp xúc với css này mới hiểu rõ được vấn đề.

Nguyễn Tấn Tài Founder/ CEO Giaotrinhhay.com - Giáo Trình Hay Chia Sẻ: Tài liệu SEO website, DIGITAL MARKETING, Ebook CNTT, Mẹo vặt, Phần mềm, Thủ thuật PC và kho tài liệu học tập hữu ích miễn phí.