Thiết kế giao diện Responsive cho blogger |
Do tốc độ phát triển di động ngày càng cao mà người dùng có xu hướng di chuyển thuận tiện hơn, nên vì vậy việc thiết kế Giao diện web chuẩn Responsive sẽ là một thiết kế nên có trên các website hiện đại nhằm tối ưu trãi nghiệm cho đọc giả của bạn hiển thị nội dung tốt trên các thiết bị di động, máy tính bảng của họ.
Sau đây mình sẽ hướng dẫn các bạn thiết kế giao diện có Responsive cho Blogger
Bước 1. Khai báo Meta viewport
Vào Mẫu -> Chọn Tùy chỉnh.Đặt đoạn code sau dưới thẻ <head> trên trong mã HTML
<meta name="viewport" content="width=device-width, initial-scale=1">Đoạn code này có tác dụng giúp nhận diện kích thước màn hình để hiện thị nội dung tương tích trên diện tích đó
Bước 2. Các điều kiện sử dụng CSS để thiết kế giao diện Responisve
Cấu trúc đoạn code Responsive như sau:@media all and (max-width: XXXpx) {Lấy ví dụ minh họa:
Các đoạn CSS
}
@media all and (max-width: 320px) {
body {
background: #e7e7e7;
}
}
- Với ví dụ này khi kích thước thiết bị được co lại có độ rộng 320px thì các đoạn code CSS trong @media all and (max-width: 320px) {...} sẽ được thực thi. Do đó bạn có thay đổi cấu trúc, các thành phần của blogger với các điều kiện này.
@media screen and (max-width : 1280px) {Bạn có thể thêm trong template blogger như sau:
/* ------------ CSS tùy chỉnh cho PC ------------*/
}
@media screen and (max-width : 1024px) {
/* ------------ CSS tùy chỉnh cho iPad ------------*/
}
@media screen and (max-width : 768px) {
/* ------------ CSS tùy chỉnh cho iPad nhỏ ------------*/
}
@media screen and (max-width : 640px) {
/* ------------ CSS tuỳ chỉnh cho iPhone ------------*/
}
@media screen and (max-width : 480px) {
/* ------------ CSS tùy chỉnh cho điện thoại di động đời cao ------------*/
}
@media screen and (max-width : 320px) {
/* ------------ CSS tùy chỉnh cho điện thoại di động thường ------------*/
}
@media screen and (max-width : 240px) {
/* ------------ CSS tùy chỉnh cho điện thoại di động thường ------------*/
}
@media screen and (max-width: ****px){
#main-wrapper { width:100%; margin:0px auto; }
.header-wrapper { width:100%; }
#content { margin-right:0; width:100%; float:left; }
#sidebar { display:none; }
#footer-wrapper { display:none; }
}
Trong đoạn này thì phần #main-wrapper nơi sẽ chứa nội dung bài viết sẽ được mở rộng độ rộng width{100%}; Sidebar đồng thời sẽ nhận được thuộc tính #sidebar{display:none} tức là được đi ẩn để dành không gian cho nội dung hiển thị tối đa...
Do vậy bạn cần thành thạo một chút kiến thức về CSS nữa để có thể tùy chỉnh giao diện Responsive cho blogger của mình.
Chúc bạn thành công!
Không có nhận xét nào: