Khả năng đáp ứng tích hợp của W3.CSS
W3.CSS bao gồm một hệ thống lưới đáp ứng, ưu tiên 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
còn lại
1/4
còn lại
100px
45px
còn lại
Các lớp đáp ứng W3.CSS
Hệ thống lưới của W3.CSS đáp ứng 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-một 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-twothird | 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-baquarter | Chiếm 3/4 cửa sổ (trên màn hình vừa và lớn) |
| w3-phần còn lại | 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-di động | Thêm khả năng đáp ứng ư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 w3-row-padding class) để có thể đáp ứng đầy đủ.
| Lớp học | Sự miêu tả |
|---|---|
| hàng w3 | Vùng chứa cho các lớp đáp ứng, không có phần đệm |
| w3-row-padding | Vùng chứa cho các lớp đáp ứng, với phần đệm bên trái và bên phải 8px |
| w3-nội dung | Vùng chứa cho nội dung tập trung vào kích thước cố định |
| w3-ẩn-nhỏ | Ẩn nội dung trên màn hình nhỏ (nhỏ hơn 601px) |
| w3-hide-medium | Ẩ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 bằng 1/2 của phần tử mẹ (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-một nửa
w3-một nửa
Thí 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>
Lớp thứ ba w3
Chiều rộng của lớp thứ ba w3 bằng 1/3 phần tử mẹ (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
Thí 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>
Lớp w3-twothird
Chiều rộng của lớp w3-twothird bằng 2/3 phần tử mẹ (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-twothird
w3-thứ ba
Thí 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>
Lớp w3-quý
Chiều rộng của lớp phần tư w3 bằng 1/4 của phần tử mẹ (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ý
Thí 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>
Lớp w3-baquarter
Chiều rộng của lớp w3-threequarter bằng 3/4 phần tử mẹ (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-baquarter
w3-quý
Thí 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>
Kết hợp
w3-quý
w3-một nửa
w3-quý
w3-quý
w3-quý
w3-một nửa
w3-một nửa
w3-quý
w3-quý
Các hàng lồng nhau
Ví dụ: w3-half Inside 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>
Các 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 đáp ứng 12 cột.
Lớp w3-rest sẽ chiếm phần còn lại của chiều rộng:
Tôi 150px
Tôi là người còn lại
Thí 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>
Cột sử dụng phần trăm
Bạn cũng có thể sử dụng thuộc tính chiều rộng CSS để đặt chiều rộng theo phần trăm:
20%
60%
20%
Thí 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>
Lớp nội dung w3
Lớp w3-content định nghĩa một vùng chứa cho nội dung ở giữa có kích thước cố định. Sử dụng thuộc tính CSS max-width để ghi đè chiều rộng mặc định (980px).
Thí dụ
<body class="w3-content" style="max-width:500px">
page content...
</body>
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:
w3-hàng:
w3-thứ ba
w3-thứ ba
w3-thứ ba
w3-row-padding:
w3-thứ ba
w3-thứ ba
w3-thứ ba
w3-hàng:
w3-row-padding:
Thí 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àng có đệm căng
Lớp w3-stretch loại bỏ các lề bên phải và bên 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:
Thí 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>
Hiển thị / Ẩn đáp ứng
The w3-hide-small, w3-hide-medium, and w3-hide-large classes hide elements on specific screen sizes.
Note: Resize the browser window to understand how it works:
Example
<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>
The w3-mobile Class
The w3-mobile class adds mobile-first responsiveness to any element.
It adds display:block and width:100% to an element on screens that are less than 600px wide.
Example
<a class="w3-button w3-mobile" href="#">Link</a>
Screen Resolutions
The built-in responsiveness of W3.CSS uses the DP size of a screen.
W3.CSS will treat an iPhone 6 with a resolution of 750 x 1334 pixels as a small screen of 375 x 667 pixels DP.
Small screens are less than 601 pixels DP, medium screens are less than 993 pixels DP.
Below is a list of typical device resolutions and reported DP sizes:
Iphone 4
Resolution
640 x 960
DP
320 x 480
Iphone 5
Resolution
640 x 1136
DP
320 x 528
Iphone 6
Resolution
750 x 1334
DP
375 x 667
Iphone 6s
Resolution
1080 x 1920
DP
414 x 736
Galaxy S6
Resolution
1440 x 2560
DP
360 x 640
Note 4
Resolution
1440 x 2560
DP
400 x 853
Nexus 6
Resolution
1440 x 2560
DP
411 x 731
iPad Mini
Resolution
768 x 1024
DP
768 x 1024
iPad
Resolution
1536 x 2048
DP
768 x 1024
Typical Laptop
Resolution
1366 x 768
DP
1366 x 768
Typical Desktop
Resolution
1920 x 1080
DP
1920 x 1080
12 Column Responsive Fluid Grid
W3.CSS also supports an advanced 12 column responsive fluid grid.
Resize the page to see the effect!
This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.
This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.
You will learn a lot more about the fluid grid in a later chapter.