Wordpress, Wordpress Development

Tạo Theme WordPress 5: Viết CSS cho giao diện Tablet

Posted on 25/10/202326/10/2023 by Lê Khánh Hòa

25
Th10

Ở bài trước chúng ta đã làm xong Viết CSS cho giao diện mobile đến bài này mình sẽ hướng dẫn các bạn viết CSS cho Tablet.

Ở đây mình xét 2 loại thiết bị đó là Small Tablet (600×800) và Tablet (ipad 2, 3, mini) (768×1024).

Đối với Small Tablet ta không có chỉnh sửa gì vì với kích thước chiều ngang như thế không thể đổ sidebar lên được, ta sẽ tiến hành viết css cho Tablet, trước tiên tạo file tablet.less trong thư mục css (nhớ vào prepros để Fresh project lại nhé các bạn).

Các bạn viết CSS vào trong đoạn code sau:

[css] @media screen and (min-width: 768px) {
/* Viết code CSS tại đây */
}
[/css]

Phần header ta vẫn giữ nguyên, ta bắt đầu xử lý phần Wrapper ở giao diện Tablet ta sẽ chia phần này thành 2 phần đó là danh sách các bài viết mới và sidebar.

Sau đây là đoạn code css cho phần Wrapper và Footer:

[css] @media screen and (min-width: 768px) {
/* Viết code CSS tại đây */
#wrapper{
.main-content{
width: 69%;
float: left;
.featured_cont{
width: 48%;
float: left;
}
.posts{
clear: both;
}
}
.sidebar{
width: 29%;
float: right;
margin: 6px;
.sidebar-item{
margin-bottom: 4px;
box-shadow: 3px 3px 3px #dcdcdc;
}
}
}
#footer{
clear: both;
}
}
[/css]

Đa số các thuộc tính css này mình đã giải thích ở các bài trước nên chắc nó cũng đơn giản dễ hiểu phải không nào.

Giao diện kết quả sẽ như thế này: