Ngày nay, do sự phát triển chóng mặt của các mobile smartphone và tablet, nên ta cần phải làm seo 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 theo tô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ết bị của họ.
-Hai là sử dụng responsive design mobile ,responsive là kiểu giao diện co giã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:
Trong những bài viết trước về Mobile tôi đã giới thiệu khá nhiều về lý thuyết Responsive design mobile là gì, ngày hôm nay tôi sẽ làm ví dụ mẫu, 3 bước để tạo ra 1 giao diện Responsive design mobile. Những ai chưa đọc các bài viết trước thì đọc trong chuyên mục Seo Mobile nhé !
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ẻ <head>.
HTML code:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
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:
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
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:
<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>
Bước 3 :CSS-Media Queries
Đầu tiên, tôi CSS cho các div trên.
CSS 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;
}
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.
Nếu bài viết này đủ hữu ích thì hãy chia sẻ nó về blog các bạn và để nguồn về blog Trung tâm đào tạo seo Litado. Và nếu thấy bài viết này hot tôi sẽ viết thêm về Responsive design navigation. Muốn biết là gì thì hãy chia sẻ bài viết này để nó đủ hot :v
Chúc cả nhà cuối tuần vui vẻ !
Từ khóa tìm trên Google:
- code nhận diện mobile
- code web cho di động
- cach lam web mobile
- tạo giao diện responsive cho blogspot
- hướng dẫn responsive web design
- kich thước cho giao diện web mobile
- lam responsive
- lập trình giao diện mobile cho web
- responsive mobile là gì
- responsive trong css
Không có nhận xét nào:
Đăng nhận xét