Lời đầu tiên cho mình xin cáo lỗi với các bạn là trong thời gian nghỉ tết do ăn chơi dữ quá nên không biết bài mới được, bây giờ mình mới tiếp tục viết bài cho Serie WordPress Toàn Tập này.
Để có thể review trang web trên các loại thiết bị như mobile, tablet, … ta dùng công cụ sau đây để test trang web ngay trên trình duyệt Firefox. Vào http://lab.maltewassermann.com/viewport-resizer/ click và giữ chuột button “CLICK OR BOOKMARK” kéo vào bookmark toolbar của Firefox, sau đó vào website cần kiểm tra và bấm vào Bookmark vừa được tạo là “<->Resizer” để kiểm tra từng kích thước màn hình khác nhau.
Nào chúng ta bắt đầu Viết CSS cho Mobile, trước tiên bạn thêm đoạn code sau vào trước thẻ </head> của file index.html.
[php] [/php]Dòng đầu tiên là để kích hoạt chế độ Responsive của giao diện, các dòng tiếp theo là chèn lần lượt các file css cho riêng từng loại màn hình vào giao diện.
Tiếp đó ta tạo file mobile.less trong thư mục css ta tạo lúc ban đầu, đừng quên bật Prepros nhé, tạo xong quay lại Prepros bấm Refresh để file mobile.less được cập nhật vào phần mềm.
Ta vừa làm vừa mở tool Resizer để check cho tiện, hiện tại giao diện nó sẽ như thế này:
Bắt đầu viết những dòng code đầu tiên trong file mobile.less, sau đây là đoạn code dùng để thiết lập một số thuộc tính chung cho giao diện mobile, các bạn sẽ viết code tại /* Viết code CSS tại đây */
[css] @media screen and (min-width: 18.75em) {/* Viết code CSS tại đây */
}
[/css]
Ta bắt đầu viết CSS cho phần Header trước, code phần header như sau:
[css] #header{.top-menu{
ul{
padding-top: 3px;
li{
padding-right: 5px;
}
}
}
.site-title{
.title{
text-align: center;
padding: 5px 0;
}
.top-banner{
text-align: center;
padding-bottom: 3px;
img{
width: 98%;
}
}
}
.header-menu{
padding-top: 10px;
min-height: 3em;
a.mobile-menu{
background: #dcdcdc;
margin-left: 40%;
border: 2px solid #FF0000;
padding: 5px;
border-radius: 3px;
}
}
}
[/css]
Ở phần này đáng chú ý đó là phần Header Menu, tại giao diện Mobile thì không thể nào làm menu với nhiều thuộc tính như vậy được nên ta tạo một nút Menu và sẽ viết một đoạn jQuery đơn giản để ẩn đi danh sách các menu để lại nút Menu khi click vào nút Menu sẽ hiển thị danh sách các item của Menu. jQuery được thực hiện như sau.
Trước tiên ta tạo một folder ngang hàng với index.html tên là “js” và tạo một file jquery.js với nội dung như sau:
[php] $(document).ready(function(){$(‘.header-menu > ul’).hide();
$(‘a.mobile-menu’).click(function(){
$(‘.header-menu > ul’).slideToggle(100);
});
});
[/php] Thêm code sau vào trước thẻ :
[php]
[/php]
Phần Wrapper không thay đổi, Code Footer có nội dung như sau:
[css] #footer{.footer-logo{
text-align: center;
}
}
[/css]
Giao diện cuối cùng sẽ như thế này:
Các bạn download code đầy đủ tại đây
Bài tiếp theo mình sẽ hướng dẫn các bạn viết CSS cho giao diện Tablet.
