Tạo Responsive Grid cột cho các dao diện mobile

Tạo Responsive Grid cột cho các dao diện mobile

September 12, 2017
Bất kì một website nào ở thời đại dùng điện thoại phổ biến thì tạo dẹo diện Responsive ở trên tất cả mọi loại dạo diện thì cực kì quan trọng, phù hợp từ dao diện máy tính cho đến dao diện moble.

Mọi người có thể áp dụng nó trên các modules các CMS mã nguồn mở như Wordpress, Drupal. Mình đã sử dụng nó trên Drupal module view responsive grid.

Bây giờ chúng ta có từng cột trên dao diện máy tính như sau. Nhưng chúng tao không thể tạo responsive trên các dao diện. Bây giờ chúng ta sẽ làm responsive trên các loại dao diện.

Dùng nth-of-type.


 Các: nth-of-type (An + B) biểu thức làm cho nó rất dễ dàng để xóa float and margin mà không cần phải thêm .first or .last class. For example:
.grid4 .col:nth-of-type(4n+1), .grid3 .col:nth-of-type(3n+1), .grid2 .col:nth-of-type(2n+1) { margin-left: 0; clear: left; }

Làm nó với Responsive With Media.

 Làm nó với responsive and fluid

/* col */ .col { background: #eee; float: left; margin-left: 3.2%; margin-bottom: 30px; } /* grid4 col */ .grid4 .col { width: 22.6%; } /* grid3 col */ .grid3 .col { width: 31.2%; } /* grid2 col */ .grid2 .col { width: 48.4%; }

Thay đổi từ 4 cột thành 3 cột

thay đổi từ 4-cột to 3-cột trên viewport với ít hơn 740px:
  1. Change the .grid4 .col width to 31.2% (one-third width)
  2. Cài đặt lại margin và left
  3. Sau đó áp dụng lại left margin and clear dùng nth-of-type(3n+1) để biến thành 3-column grid  




@media screen and (max-width: 740px) {
 .grid4 .col {
  width: 31.2%;
 }
 .grid4 .col:nth-of-type(4n+1) {
  margin-left: 3.2%;
  clear: none;
 }
 .grid4 .col:nth-of-type(3n+1) {
  margin-left: 0;
  clear: left;
 }
}

Thay ĐỔI 4-COLUMN VÀ 3-COLUMN THÀNH 2-COLUMN

Thay đổi 4-column và 3-column thành 2-column trên viewport với ít hơn 600px: 
@media screen and (max-width: 600px) {
 /* thay đổi grid4 to 2-column */
 .grid4 .col {
  width: 48.4%;
 }
 .grid4 .col:nth-of-type(3n+1) {
  margin-left: 3.2%;
  clear: none;
 }
 .grid4 .col:nth-of-type(2n+1) {
  margin-left: 0;
  clear: left;
 }

 /* Thay đổi grid3 to 2-column */
 .grid3 .col {
  width: 48.4%;
 }
 .grid3 .col:nth-of-type(3n+1) {
  margin-left: 3.2%;
  clear: none;
 }
 .grid3 .col:nth-of-type(2n+1) {
  margin-left: 0;
  clear: left;
 }
}

LÀM TẤT CẢ CÁC CỘT thành 1 cột

Làm tất cả các thành một cột trên viewport với ít hơn 400px: 
@media screen and (max-width: 400px) {
 .col {
  width: 100% !important;
  margin-left: 0 !important;
  clear: none !important;
 }
}


EmoticonEmoticon

Subscribe to: Post Comments (Atom)