[Tips] - Hướng dẫn chi tiết cách tích hợp Responsive cho blogspot

Chào các bạn nói đến cách tích hợp Responsive vào blogspot thì khi bạn search google tìm được rất nhiều kết quả, nhưng những bài viết đó đều chung chung, khi các bạn là newbi thì không thể nào thêm nó vào blogspot của mình được. Hôm nay Khám Phá Blog's sẽ hướng dẫn chi tiết cách tích hợp giao diện mobi cho blogpsot.

Xêm Thêm : Responsive là gì?

Cách thêm Responsive vào blogspot.

Ở đây mình sẽ ví dụ cho các bạn một blog có 1 sidebar-wrapper và một main-wrapper cho các bạn dể hiểu hơn.

1. Tìm hiểu bố cục

Như vậy thì bố cục blog của chúng ta sẽ có Header (tiêu đề or banner blog), main-wrapper (phần nội dung blog), sidebar-wraper (tiện ích, bố cục blog), footer (chân trang blog)

2. Xây dựng bố cục

Bạn phải tự xây dựng bố cục trong đầu của mình, là muốn ẩn cái gì và hiện cái gì khi xem trên giao diện mobi cho từng loại màn hình. dưới đây là tất cả những loại màn hình phổ thông nhất dùng để tích hợp Responsive.

Đầu tiên chèn đoạn code này dưới thẻ <head>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

Đoạn code trên giúp nhận dạng từng loại màn hình để hiện thị, và đoạn code bên dưới sẽ giúp hiển thị ở những loại màn hình

@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 ------------*/
}

Và dưới đây là cách chèn css cho từng loại màn hình, ở đây mình ví dụ cho các bạn xem nhé
Đối với PC thì chúng ta cho hiển thị đầy đủ bố cục

@media screen and (max-width : 1280px) {
#header-wrapper {
width: 1024px;
margin: 0 auto;
}
#sidebar-wrapper {
float: left;
width: 300px;
margin-top: 20px;
}
#main-wrapper {
float: right;
width: 700px;
margin-top: 20px;
}
#footer-wrapper {
height: auto;
width: 1024px;
overflow: hidden;
}
}

Đối với những loại màn hình nhỏ hơn chúng ta có thể ẩn sidebar đi chẳng hạng

@media screen and (max-width : 640px) {
#header-wrapper {
width: 600px;
margin: 0 auto;
}
#sidebar-wrapper {display:none;}
#main-wrapper {
float: right;
width: 600px;
margin-top: 20px;
}
#footer-wrapper {
height: auto;
width: 600px;
overflow: hidden;
}
}

Cứ như vậy các bạn muốn hiển thị phần nào độ rộng của nó bao nhiu thì các bạn chỉ cần thêm ID của nó vào và thêm kích thước vào và xem thử, nếu chưa cảm thấy ok thì sửa.

Trong quá trình thực hiện các bạn có thể check thử với công cụ kiểm tra Responsive TẠI ĐÂY

Khám Phá Blog's chúc các bạn thành công, mọi thắc mắc có thể comments bên dưới để được giải đáp.

www.freeblogsites.info

[Tips] - Hướng dẫn chi tiết cách tích hợp Responsive cho blogspot

Cách thêm Responsive vào blogspot.

1. Tìm hiểu bố cục

2. Xây dựng bố cục

Penulisan markup di komentar

www.freeblogsites.info

[Tips] - Hướng dẫn chi tiết cách tích hợp Responsive cho blogspot

Cách thêm Responsive vào blogspot.

1. Tìm hiểu bố cục

2. Xây dựng bố cục

Bài Viết Cùng Chủ Đề

Penulisan markup di komentar