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

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

Bước 1. Khai báo Meta viewport

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

Bước 2. Các điều kiện sử dụng CSS để thiết kế giao diện Responisve

@media all and (max-width: XXXpx) {
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) {
/* ------------ 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; }
}