3 bước để thiết kế giao diện web Responsive.


Tiếp nối bài viết về giao diện web Responsive, với những người mới làm về web thì chắc hẳn để thiết kế một giao diện thân thiện với thiết bị di động cho riêng mình là một việc làm khó khăn.
Chunghic.com xin chia sẻ 3 bước để thiết kế giao diện Responsive như sau:
Để dễ dàng các bạn hãy hình dung một website được hiển thị trên 3 kích thước màn hình sẽ có dạng như sau:
giao dien Responsive 1
giao dien web Responsive 2
Mình sẽ không dài dòng nữa mà đi thẳng vào vấn đề luôn
Bước 1 : Tạo 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ẻ. HTML

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:

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.

HTML code:Header, Content, Sidebar,Footer

Bước 3 :CSS-Media Queries
Đầu tiên, tôi CSS cho các div trên.
CSS code:
<pre?#pagewrap { padding: 5px; width: 960px; margin: 20px auto; } #header { height: 180px; } #content { width: 600px; float: left; } #sidebar { width: 300px; float: right; } #footer { clear: both; }

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% CSS code:

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

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

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

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

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

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.

Comments 1

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

log in

reset password

Back to
log in
Free BoomBox WordPress Theme