XtGem Forum catalog
Thiết kế giao diện responsive trong 3 bước | Html, css, javacripst, php, jquery | Wapmaster - Forum-VN #ref-menu
▼ Thiết kế giao diện responsive trong 3 bước
* tamhoangdk
- Cấp bậc: mem
18-04-2016
img[/url]


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ọ. Để đáp ứng được nhu cầu đó hiện tại theotôi biết thì người ta có 2 cách làm :

-Một là 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ẽ đưa họ đến trang được thiết kế dành riêng cho thiếtbị của họ.

-Hai là sử dụng responsive design ,responsive là kiểu giao diện cogiãn theo kích thước của cửa sổ trình duyệt, cũng là xu hướng thiết kếweb của năm nay.

Nói nôm na là vậy, các bạn xem vài hình ảnh sẽ dễ hiểu

img





img



Hôm nay tôi sẽ hướng dẫn các bạn làm thiết kế 1 giao diện responsive trong 3 bước

Bước 1 : Meta Tag

Tag meta viewport là điều tất yếu trong responsive layouts. Nó thiếtlậ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 địnhtừ 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>.

HTML Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Copy code

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

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

Bước 2 : HTML

Trong ví dụ này, tôi có một bố cục trang cơ bản với một #header,#content nội dung, #sidebar, và #footer. Tiêu đề có height 180px cốđịnh, nội dung #content width là 600px và #sidebar width là 300px.


img


HTML Code:
<div id="pagewrap"><div id="header"><h1>Header</h1></div><div id="content"><h2>Content</h2></div><div id="sidebar"><h3>Sidebar</h3></div><div id="footer"><h4>Footer</h4></div></div>
Copy code


Bước 3 :CSS-Media Queries

Đầu tiên, tôi CSS cho các div trên
Code:
#pagewrap {padding: 5px;width: 960px;margin: 20px auto;}#header {height: 180px;}#content {width: 600px;float: left;}#sidebar {width: 300px;float: right;}#footer {clear: both;}
Copy code

Sau đó, tôi sẽ sử dụng CSS3 media query, với viewport từ 980px trở xuống , màn hình sẽ hiển thị 2 cột với width của #content là 65% và #sidebar là 30%

Code:
/* 980px hoặc nhỏ hơn */@media screen and (max-width: 980px) {#pagewrap {width: 94%;}#content {width: 65%;}#sidebar {width: 30%;}}
Copy code

Và với viewport 700px trở xuống , ta set giá trị width của #contentvà #siderbar là auto , bỏ float đi để hiển thị 1 cột full width

Code:
/* 700px hoặc nhỏ hơn */@media screen and (max-width: 700px) {#content {width: auto;float: none;}#sidebar {width: auto;float: none;}}
Copy code

Cuối cùng , với viewport 400px trở xuống(mobile),ta set lại height#header auto ,thay đổi font chữ h1 xuống 24px, và cho ẩn luôn sidebar

Code:
/*480px hoặc nhỏ hơn */@media screen and (max-width: 480px) {#header {height: auto;}h1 {font-size: 24px;}#sidebar {display: none;}}
Copy code


Bạn có thể viết bao nhiêu media query tuỳ ý ,trong ví dụ này tôi chỉ viết 3 media queries.

Demo
(sau khi mở demo, đổi kích thước trình duyệt để thấy)



Hi vọng bài viết có ích cho bạn!
- Edited:  tamhoangdk )
18-04-2016
▲ Tổng số: 1
- Share:
BBCode:

Link:
Online: Guests: 1

Từ khóa: trong , giao , responsive , Thiết , kế