[Theme Development] Phần 7: Viết CSS cho giao diện Mobile-first – phần 3
Đầu tiên cho mình gửi lời cáo lỗi vì trong tuần qua mình không có dịp tiếp tục viết serie này do cái máy tính mình nó trở mặt mà không thèm báo trước, và như thế mình đã phải mua máy mới và cũng mất kha khá thời gian để di chuyển dữ liệu qua mà tiếp tục con đường chinh chiến.
Hôm nay mọi thứ đã tạm đâu vào đó, mình xin tiếp tục viết tiếp phần 7 của serie mà cụ thể là ở phần này chúng ta sẽ viết CSS cho giao diện máy tính bảng vì hôm trước mình đã viết phiên bản dành cho mobile rồi.
Bây giờ chúng ta lại tiếp tục mở lại các công cụ cần thiết, rồi mở file tablet.less lên bằng Sublime Text 2 nhé vì đây là file riêng dành cho các đoạn CSS của máy tính bảng.
Giống như khi ta viết giao diện cho file mobile.less, đầu tiên chúng ta khai báo một đoạn media query và include các file .less quan trọng
1 2 3 4 5 | @media screen and (min-width: 34.375em) { @import '../less_file/grid.less'; @import'../less_file/variabless.less'; @total-width: 100%;} |
Nhắc lại là toàn bộ CSS mà chúng ta viết trong bài này đều được viết trong cặp @media nhé, tức là viết ngay bên dưới @total-width.
Trước hết, chúng ta sẽ cần tăng kích thước size chữ của trang lên vì dù gì lên máy tính bảng màn hình cũng rộng hơn nên dễ đọc.
1 2 3 | body { font-size: 1em;} |
Bạn có thể thấy bây giờ cái .top-bar chữ nó hơi sát lề và có chứa khoảng trống khá rộng ở phía sau. Để thẩm mỹ hơn tốt nhất chúng ta nên căn giữa cho đoạn text bên trong đó.
1 2 3 4 | /*--Header--*/.top-bar { text-align: center;} |
Còn #header thì trước mắt chúng ta không cần thay đổi gì nhiều, nhất là menu vì ở máy tính bảng chúng ta cũng vẫn phải dùng hiệu ứng sổ menu giống trên di động. Nên để cho gon hơn, mình sẽ chia #header ra làm hai, bên trái hiển thị logo và bên phải hiển thị menu.
01 02 03 04 05 06 07 08 09 10 11 12 | #header { padding: 3em 0.5em 1em 0.5em; .row(12); .site-title { .column(4,12); a { text-align: left; } } .header-menu { .column(8,12); margin-top: 1em; } //end .header-menu} //end #header |
Kết quả bây giờ ta tạm có phần đầu trang như sau:
Bạn nhìn xuống phần .featured-post xem, nó to lắm phải không? Vì vậy ở giao diện máy tính bảng thì tốt nhất ta nên chia nó ra làm 3 cột luôn, giống ảnh này nè:
Và đây là đoạn CSS cho nó.
01 02 03 04 05 06 07 08 09 10 11 12 13 | /*--Featured Post--*/.featured-post { margin-top: 1em !important; margin-bottom: 1em !important; padding: 0 0.5em; .row(12); .box { .column(4); } .post { .post-title { font-size: 1.3em; } }} //end .featured-post |
Ngay bên dưới nữa là tới phần .content để hiển thị các bài viết mới nhất, phần này ta cũng cần sửa ít tôi, đó là chỉ cho cái đoạn mô tả bài viết hiển thị ra là xong.
1 2 3 4 5 6 | /*--Content--*/ .content { .post-exceprt { display: block !important; } } |
Kết quả
Khu vực .category-content cũng không phải thay đổi quá nhiều, ta chỉ cần chia nó làm 2 cột thay vì chỉ hiển thị một cột như trên điện thoại.
1 2 3 4 5 6 7 8 | /*--Category Content--*/.category-content { width: 100% !important; margin: 0 !important; .cat-1, .cat-2 { .column(6,12); }} |
Kết quả bây giờ ta cũng có một giao diện kha khá dễ nhìn hơn hồi nãy rồi đúng chưa?
Tiếp tục là phần .sidebar, ở phần này bây giờ mình không biết phải làm gì nhiều với nó vì chúng ta chưa thể đưa nó sang nằm bên phải phần .content được nên tạm thời cứ cho nó yên vị nằm riêng một cột luôn vậy.
Nhưng để dễ nhìn trên máy tính bảng, mình sẽ làm phần hiển thị Bài mới đăng (.recent-post) thành 4 cột vì để 2 cột như cũ thì khoảng cách nó khá rộng.
1 2 3 4 5 6 7 | /*--Sidebar--*/.sidebar { .recent-post { .row(12); li {.column(6,12); clear: none !important;} }} |
Sở dĩ đoạn CSS trên là mình chia thành 2 cột nhưng mình lại nói là 4 vì trước đó ta đã chia sẵn thẻli ra làm 2 rồi. Và bây giờ nhìn sidebar sẽ như thế này:
Còn cái .ads thì chắc mình tạm để thế, hic.
Cuối cùng là #footer, qua giao diện máy tính bảng thì phần #footer khá rộng rãi, mà ở đó ta lại có 3 cột nên không thể chia 3 cột bằng nhau vì diện tích không cho phép. Vì vậy mình sẽ chia cột 1 và 2 bằng nhau, riêng cột 3 thì diện tích bằng cả 2 cột kia.
Và CSS….
01 02 03 04 05 06 07 08 09 10 11 12 13 | /*--Footer--*/#footer { .col-1,.col-2 { .column(6,12); } ul, ol { padding: 0 !important } .col-3 { .row(12); clear: both; li { .column(2,12) !important } } //end .col-3} |
Không chỉ chia cột, chúng ta cũng cần phải chia lại các thẻ li trong .col-3 vì nếu cho hiển thị 3 ảnh / hàng như cũ thì ảnh nó sẽ khá lớn, không đẹp mắt lắm.
Và cuối cùng là ta có giao diện như sau:
Nó cũng không thực sự là đẹp nhưng mình hy vọng là nó có thể làm cho nhiều bạn hiểu làm thế nào để tạo được một giao diện trên nhiều thiết bị khác nhau.
Ở phần 8, chúng ta sẽ tiếp tục đi vào phần cuối của khâu viết CSS đó là viết CSS cho giao diện Desktop, tức là giao diện mà nó sẽ hiển thị ra khi truy cập vào website bằng máy tính.
Category: lập trình wordpress, WordPress
0 comments