CuDemVN.Wap.Sh
GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ
Hướng Dẫn Tự Làm Hệ Thống Responsive Grids bằng CSS - Giao diện tự động co dãn trên mọi Thiết bị
 |  RoSino18k  
06-06-2016
|
Xin chào các bạn. Việc thiết kế Wap/Web Site là việc thiết yếu của các developer. Chắc chắn không có một site đúng nghĩa nào có thể dùng giao diện mặc định của HTML mà không trang trí các phần tử đó bằng CSS được. Phong cách thiết kế của thời đại đang là
responsive
giao diện tự động co dãn trên mọi thiết bị. Mình viết bài này cho các bạn muốn làm web mình responsive thay vì dùng framework. (vì lí do nào đó không muốn dùng)
Hướng Dẫn Thiết kế WebSite Giao Diện Tự Động Co Dãn Với Responsive
- Đầu tiên chắc chắn phải có là thẻ meta responsive
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Thẻ meta viewport này bạn cần thêm vào header để khai báo với trình duyệt rằng web mình có hỗ trợ tính năng responsive.
Đó là thẻ meta, tiếp theo ta sẽ viết code CSS, đây là phần quan trọng nhất vì responsive mà mình đề cập trong bài viết này sử dụng @media trong CSS.
Trước tiên ta tiến hành reset lại CSS.
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Chiều rộng của 1 element sẽ được tính bao gồm cả border, padding để tính width cho cột chuẩn hơn
Để phân cục nội dung thay vì dùng table, td, tr
Ta cần một khung chứa (container) đóng vai trò như một table
.container:before, .container:after {
display: table; // Kiểu hiển thị table
content: ""; // Làm trống nội dung trước và sau container
}
.container:after {
clear: both; // Fix lỗi floats
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto; // Căn lề giữa
margin-left: auto; // cho trang web
}Cơ bản chúng ta đã có 1 container chứa toàn bộ nội dung của site. Nhưng mình chưa set width cho nó chúng ta cần giãn ra theo độ rộng của màn hình thiết bị
@media (min-width: 768px) {
.container {
width: 750px; // Màn hình nhỏ (768-750) /2 = 9px
}
}
@media (min-width: 992px) {
.container {
width: 970px; // Màn hình vừa (992-970) /2 = 11px
}
}
@media (min-width: 1200px) {
.container {
width: 1170px; // Màn hình lớn (1200-1170) /2 = 15px
}
}Vậy nếu màn hình nhỏ hơn 768px thì full width
Bây giờ chúng ta cần hàng (rows). Ở trên các bạn thấy container có padding 15px vậy thì nội dung sẽ bị thụt vào 1 khoảng??? Bây giờ chúng ta sẽ dùng row khắc lại với margin là số âm
.row {
margin-right: -15px;
margin-left: -15px;
}Chắc các bạn thắc mắc sao phải khổ thế thì mình chỉ có thể giải thích đây là Hủ tục của grids @@ kiểu như
Container > Rows > Columns.
Phải có row cho đầy đủ @@ bạn nên để nó đảm nhiệm thêm chức năng clear fix hack
.row:after {
visibility: hidden;
display: block;
overflow: auto;
font-size: 0;
content: " ";
clear: both;
height: 0;
}Vì chúng ta sẽ dùng float nên cần fix lỗi này....
Rồi giờ đến Các cột trong hàng (column). Mình cũng quy định luôn là làm 12 cột và responsive cho 4 kiểu màn hình. Còn các bạn có thể tùy chỉnh số cột tùy ý
Chúng ta sẽ chọn sao cho viết bằng HTML dễ dàng nhất
Đây là cách viết của bootstrap
Đây là cách viết của chúng ta
Định nghĩa chung cho tất cả các cột
.col.x1, .col.x2, .col.x3, .col.x4, .col.x5, .col.x6, .col.x7, .col.x8, .col.x9, .col.x10, .col.x11, .col.x12, .col.s1, .col.s2, .col.s3, .col.s4, .col.s5, .col.s6, .col.s7, .col.s8, .col.s9, .col.s10, .col.s11, .col.s12, .col.m1, .col.m2, .col.m3, .col.m4, .col.m5, .col.m6, .col.m7, .col.m8, .col.m9, .col.m10, .col.m11, .col.m12, .col.l1, .col.l2, .col.l3, .col.l4, .col.l5, .col.l6, .col.l7, .col.l8, .col.l9, .col.l10, .col.l11, .col.l12 {
position: relative;
min-height: 1px;
padding-right: auto;
padding-left: auto;
}Đi từ cột nhỏ nhất lên (mobile first)
:: x-small
.col.x1, .col.x2, .col.x3, .col.x4, .col.x5, .col.x6, .col.x7, .col.x8, .col.x9, .col.x10, .col.x11, .col.x12 {
float: left;
}
.col.x12 {
width: 100%;
}
.col.x11 {
width: 91.66666667%;
}
.col.x10 {
width: 83.33333333%;
}
.col.x9 {
width: 75%;
}
.col.x8 {
width: 66.66666667%;
}
.col.x7 {
width: 58.33333333%;
}
.col.x6 {
width: 50%;
}
.col.x5 {
width: 41.66666667%;
}
.col.x4 {
width: 33.33333333%;
}
.col.x3 {
width: 25%;
}
.col.x2 {
width: 16.66666667%;
}
.col.x1 {
width: 8.33333333%;
}:: small bắt đầu từ small trở lên thì dùng @media để co giãn màn hình
@media (min-width: 768px) {
.col.s1, .col.s2, .col.s3, .col.s4, .col.s5, .col.s6, .col.s7, .col.s8, .col.s9, .col.s10, .col.s11, .col.s12 {
float: left;
}
.col.s12 {
width: 100%;
}
.col.s11 {
width: 91.66666667%;
}
.col.s10 {
width: 83.33333333%;
}
.col.s9 {
width: 75%;
}
.col.s8 {
width: 66.66666667%;
}
.col.s7 {
width: 58.33333333%;
}
.col.s6 {
width: 50%;
}
.col.s5 {
width: 41.66666667%;
}
.col.s4 {
width: 33.33333333%;
}
.col.s3 {
width: 25%;
}
.col.s2 {
width: 16.66666667%;
}
.col.s1 {
width: 8.33333333%;
}
}:: medium
@media (min-width: 992px) {
.col.m1, .col.m2, .col.m3, .col.m4, .col.m5, .col.m6, .col.m7, .col.m8, .col.m9, .col.m10, .col.m11, .col.m12 {
float: left;
}
.col.m12 {
width: 100%;
}
.col.m11 {
width: 91.66666667%;
}
.col.m10 {
width: 83.33333333%;
}
.col.m9 {
width: 75%;
}
.col.m8 {
width: 66.66666667%;
}
.col.m7 {
width: 58.33333333%;
}
.col.m6 {
width: 50%;
}
.col.m5 {
width: 41.66666667%;
}
.col.m4 {
width: 33.33333333%;
}
.col.m3 {
width: 25%;
}
.col.m2 {
width: 16.66666667%;
}
.col.m1 {
width: 8.33333333%;
}
}:: large
@media (min-width: 1200px) {
.col.l1, .col.l2, .col.l3, .col.l4, .col.l5, .col.l6, .col.l7, .col.l8, .col.l9, .col.l10, .col.l11, .col.l12 {
float: left;
}
.col.l12 {
width: 100%;
}
.col.l11 {
width: 91.66666667%;
}
.col.l10 {
width: 83.33333333%;
}
.col.l9 {
width: 75%;
}
.col.l8 {
width: 66.66666667%;
}
.col.l7 {
width: 58.33333333%;
}
.col.l6 {
width: 50%;
}
.col.l5 {
width: 41.66666667%;
}
.col.l4 {
width: 33.33333333%;
}
.col.l3 {
width: 25%;
}
.col.l2 {
width: 16.66666667%;
}
.col.l1 {
width: 8.33333333%;
}
}Các bạn thắc mắc width ở đâu ra thì cầm máy tính lên. 100% là 12 cột vậy 1 cột bằng bao nhiêu: 100/12 cứ thế chia đều ra, nếu bạn xài 16 cột hay 24 cột tùy responsive không khó phải không
Hướng Dẫn Sử Dụng:
<div class="container">
<div class="row">
<div class="col x8 s8 m6 l6">....</div>
<div class="col x4 s4 m6 l6">....</div>
</div><!-- End Row -->
</div><!-- End Container -->
Như vậy bằng việc sử dụng @media trong CSS bạn đã có thể tự tạo cho mình hệ thống responsive gribs rồi nhé.
Chúc các bạn thành công!
Nguồn: LapTrinh.Pro
Lượt xem: 1025 
Đánh giá: 4.5/ 5, 1025 bình chọn
| - Chia sẻ: |   |
Link:
Còn “nhiều” Lắm!