Khả năng phản hồi tích hợp của W3.CSS
W3.CSS bao gồm hệ thống lưới đáp ứng đầu tiên trên thiết bị di động để xử lý bố cục:
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
3/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
50px
nghỉ ngơi
1/4
nghỉ ngơi
100px
45px
nghỉ ngơi
Các lớp đáp ứng W3.CSS
Hệ thống lưới của W3.CSS phản hồi nhanh và các cột sẽ tự động sắp xếp lại tùy thuộc vào kích thước màn hình:
| Lớp học | Sự miêu tả |
|---|---|
| w3-nửa | Chiếm 1/2 cửa sổ (trên màn hình vừa và lớn) |
| w3-thứ ba | Chiếm 1/3 cửa sổ (trên màn hình vừa và lớn) |
| w3-hai phần ba | Chiếm 2/3 cửa sổ (trên màn hình vừa và lớn) |
| w3-quý | Chiếm 1/4 cửa sổ (trên màn hình vừa và lớn) |
| w3-ba phần tư | Chiếm 3/4 cửa sổ (trên màn hình vừa và lớn) |
| phần còn lại của w3 | Chiếm phần còn lại của chiều rộng cột |
| w3-col | Xác định một cột trong lưới đáp ứng 12 cột |
| w3-mobile | Thêm khả năng phản hồi ưu tiên thiết bị di động vào một ô (cột). Hiển thị các phần tử dưới dạng phần tử khối trên thiết bị di động. |
Các lớp đáp ứng ở trên phải được đặt bên trong lớp w3-row (hoặc lớp đệm w3-row ) để có thể đáp ứng đầy đủ.
| Lớp học | Sự miêu tả |
|---|---|
| hàng w3 | Vùng chứa dành cho các lớp đáp ứng, không có phần đệm |
| phần đệm hàng w3 | Vùng chứa dành cho các lớp đáp ứng, có khoảng đệm trái và phải 8px |
| nội dung w3 | Vùng chứa nội dung có kích thước cố định tập trung |
| w3-ẩn-nhỏ | Ẩn nội dung trên màn hình nhỏ (dưới 601px) |
| w3-ẩn-trung bình | Ẩn nội dung trên màn hình trung bình |
| w3-ẩn-lớn | Ẩn nội dung trên màn hình lớn (lớn hơn 992px) |
| l1 - l12 | Kích thước đáp ứng cho màn hình lớn |
| m1 - m12 | Kích thước đáp ứng cho màn hình trung bình |
| s1 - s12 | Kích thước đáp ứng cho màn hình nhỏ |
Lớp w3-nửa
Chiều rộng của lớp w3-half là 1/2 phần tử cha (style="width:50%").
Trên màn hình nhỏ hơn 601 pixel, nó thay đổi kích thước thành 100%.
w3-nửa
w3-nửa
Ví dụ
<div class="w3-row">
<div class="w3-half w3-container w3-green">
<h2>w3-half</h2>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
</div>
</div> Hãy tự mình thử »Lớp w3 thứ ba
Chiều rộng của lớp thứ ba w3 là 1/3 phần tử cha (style="width:33,33%").
Trên màn hình nhỏ hơn 601 pixel, nó thay đổi kích thước thành 100%.
w3-thứ ba
w3-thứ ba
w3-thứ ba
Ví dụ
<div class="w3-row">
<div class="w3-third w3-container w3-green">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
</div> Hãy tự mình thử »Lớp w3-twothird
Chiều rộng của lớp w3-twothird là 2/3 phần tử cha (style="width:66,66%").
Trên màn hình nhỏ hơn 601 pixel, nó thay đổi kích thước thành 100%.
w3-hai phần ba
w3-thứ ba
Ví dụ
<div class="w3-row">
<div class="w3-green w3-container
w3-twothird">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> Hãy tự mình thử »Lớp w3 quý
Chiều rộng của lớp w3-quarter là 1/4 phần tử cha (style="width:25%").
Trên màn hình nhỏ hơn 601 pixel, nó thay đổi kích thước thành 100%.
w3-quý
w3-quý
w3-quý
w3-quý
Ví dụ
<div class="w3-row">
<div class="w3-green w3-container
w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> Hãy tự mình thử »Lớp w3-ba quý
Chiều rộng của lớp w3-ba quý là 3/4 phần tử cha (style="width:75%").
Trên màn hình nhỏ hơn 601 pixel, nó thay đổi kích thước thành 100%.
w3-ba phần tư
w3-quý
Ví dụ
<div class="w3-row">
<div class="w3-green w3-container
w3-threequarter">
<h2>w3-threequarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> Hãy tự mình thử »kết hợp
w3-quý
w3-nửa
w3-quý
w3-quý
w3-quý
w3-nửa
w3-nửa
w3-quý
w3-quý
Hàng lồng nhau
Ví dụ: w3-half Bên trong w3-half
<div class="w3-row">
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
</div> Hãy tự mình thử »Cột sử dụng phần còn lại
Lớp w3-col xác định một cột trong lưới phản hồi 12 cột.
Lớp w3-rest sẽ chiếm phần còn lại của chiều rộng:
Tôi là 150px
Tôi là người còn lại
Ví dụ
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>I
am 150px</p></div>
<div class="w3-rest
w3-green"><p>I am the rest</p></div>
</div> Hãy tự mình thử »Cột sử dụng phần trăm
Bạn cũng có thể sử dụng thuộc tính CSS width để đặt chiều rộng theo phần trăm:
20%
60%
20%
Ví dụ
<div class="w3-row">
<div class="w3-col"
style="width:20%"><p>20%</p></div>
<div class="w3-col" style="width:60%"><p>60%</p></div>
<div
class="w3-col" style="width:20%"><p>20%</p></div>
</div> Hãy tự mình thử »Lớp nội dung w3
Lớp nội dung w3 xác định vùng chứa cho nội dung có kích thước cố định tập trung vào. Sử dụng thuộc tính CSS max-width để ghi đè chiều rộng mặc định (980px).
w3-row so với w3-row-padding
Lớp w3-row xác định một vùng chứa không có phần đệm, trong khi lớp w3-row-padding thêm phần đệm trái và phải 8px vào mỗi cột:
hàng w3:
w3-thứ ba
w3-thứ ba
w3-thứ ba
phần đệm hàng w3:
w3-thứ ba
w3-thứ ba
w3-thứ ba
hàng w3:
phần đệm hàng w3:
Ví dụ
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col
s4"><img src="img_snowtops.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col
s4"><img src="img_snowtops.jpg"></div>
</div> Hãy tự mình thử »Hàng đệm căng
Lớp w3-stretch loại bỏ lề phải và lề trái khỏi một phần tử. Lớp này thường được sử dụng để kéo dài một hàng có đệm:
Một ví dụ với w3-stretch:
Một ví dụ không có w3-stretch:
Ví dụ
<div class="w3-row-padding w3-section w3-stretch">
<div
class="w3-col s4">
<img src="img_nature_wide.jpg">
</div>
<div class="w3-col s4">
<img src="img_snow_wide.jpg">
</div>
<div class="w3-col s4">
<img
src="img_mountains_wide.jpg">
</div>
</div> Hãy tự mình thử »Hiển thị / Ẩn đáp ứng
Các lớp w3-hide-small , w3-hide-medium và w3-hide-large ẩn các thành phần trên các kích thước màn hình cụ thể.
Lưu ý: Thay đổi kích thước cửa sổ trình duyệt để hiểu cách hoạt động:
Ví dụ
<div class="w3-container w3-hide-small w3-red">
<p>w3-hide-small will
be hidden on small screens (phones)</p>
</div>
<div
class="w3-container w3-hide-medium w3-green">
<p>w3-hide-medium will
be hidden on medium screens (tablets)</p>
</div>
<div
class="w3-container w3-hide-large w3-blue">
<p>w3-hide-large will be
hidden on large screens (laptops/desktop)</p>
</div> Hãy tự mình thử »Lớp w3-mobile
Lớp w3-mobile bổ sung khả năng phản hồi ưu tiên thiết bị di động cho bất kỳ phần tử nào.
Nó thêm display:block và width:100% vào một phần tử trên màn hình rộng dưới 600px.
Độ phân giải màn hình
Khả năng phản hồi tích hợp của W3.CSS sử dụng kích thước DP của màn hình.
W3.CSS sẽ coi iPhone 6 có độ phân giải 750 x 1334 pixel như một màn hình nhỏ 375 x 667 pixel DP.
Màn hình nhỏ có độ phân giải dưới 601 pixel DP, màn hình trung bình có độ phân giải dưới 993 pixel DP.
Dưới đây là danh sách độ phân giải thiết bị điển hình và kích thước DP được báo cáo:
Iphone 4
Nghị quyết
640x960
DP
320 x 480
Iphone 5
Nghị quyết
640 x 1136
DP
320 x 528
Iphone 6
Nghị quyết
750x1334
DP
375 x 667
iphone 6s
Nghị quyết
1080x1920
DP
414 x 736
Galaxy S6
Nghị quyết
1440x2560
DP
360 x 640
Lưu ý 4
Nghị quyết
1440x2560
DP
400 x 853
Nexus 6
Nghị quyết
1440x2560
DP
411 x 731
Ipad nhỏ
Nghị quyết
768 x 1024
DP
768 x 1024
iPad
Nghị quyết
1536 x 2048
DP
768 x 1024
Laptop điển hình
Nghị quyết
1366 x 768
DP
1366 x 768
Máy tính để bàn điển hình
Nghị quyết
1920x1080
DP
1920x1080
Lưới chất lỏng đáp ứng 12 cột
W3.CSS cũng hỗ trợ lưới chất lỏng đáp ứng 12 cột tiên tiến.
Thay đổi kích thước trang để xem hiệu ứng!
Phần này sẽ chiếm 12 cột trên màn hình nhỏ, 4 cột trên màn hình trung bình và 3 cột trên màn hình lớn.
Phần này sẽ chiếm 12 cột trên màn hình nhỏ, 8 cột trên màn hình trung bình và 9 cột trên màn hình lớn.
Bạn sẽ tìm hiểu thêm nhiều điều về lưới chất lỏng trong chương sau.
