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) {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é
/* ------------ 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 ------------*/
}
Đố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
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.
@media screen and (max-width : 640px) {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.
#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;
}
}
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.
Bài Viết Cùng Chủ Đề
[Tips] - Menu chuyên mục Css full Responsive cho Blogspot
Tiếp tục share cho các bạn một mẫu menu dùng css siêu đẹp cho blogspot dùng làm menu chuyên mục, điều đặc biệt ở menu ... 
[Tips] - 4 Cách làm đẹp Popular Posts cho blogspot
Popular Posts hay còn gọi là bài viết xem nhiều ở trong Blogspot là một widget mà không thể thiếu cho bất kỳ blog nào, ... 
[Tips] - Làm đẹp widget nhãn (label) blogpsotNhãn hay còn gọi là Label trong blogspot là một phần không thể thiếu trong blogpsot nhằm giúp blogspot tăng pagera ... 
[Tips] - Cách lấy data blogspot người khácLấy data blogspot hay còn gọi là rip data blogspot người khác có nghĩa là cách lấy một số hay toàn bộ bài viết của một ... 
[Tips] Recent post 3 cột với thumbnail cho blogspot
Recent post là bố trí hiển thị bài viết trên từng widget theo một nhãn hoặc toàn bộ vài viết trên blogspot, tiện ích n ...
1 nhận xét:
Write nhận xéttext comment
ReplyIcon CommentsIcon Comments