#12 Thiết kế giao diện Responsive cho blogger

Thiết kế giao diện Responsive Design là thuật ngữ mới được phát triển trong vài năm gần đây. Theo đó các giao diện website có Responsive sẽ tự động co giãn các thành phần để hiển thị tương thích trên các màn hình thiết bị khác nhau.

Thiết kế giao diện Responsive cho blogger

Một giao diện web được thiết kế có chuẩn Responsive sẽ được Google đánh giá cao về mặt SEO vì bạn đã tối ưu được trãi nghiệm người dùng trên các thiết bị khác nhau.

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) {
Các đoạn CSS
}

Lấy ví dụ minh họa:

@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.

Bạn sẽ thêm các điều kiện này bên trong blog của mình ở nơi chứa CSS:

@media screen and (max-width : 1280px) {
/* ------------ 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 ------------*/
}

Bạn có thể thêm trong template blogger như sau:

@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!