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ữ
* Trang chủ >> WapMaster
Tìm Kiếm Thảo Luận
↓↓

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ị

Admin* 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
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4"></div>

Đây là cách viết của chúng ta
<div class="col x12 s8 m6 l4"></div>

Đị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: 347
score
Đánh giá: 4.5/ 5, 347 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-2-347]

80s toys - Atari. I still have