W3.CSS - Thiết kế đáp ứng
W3.CSS có một số lớp đặc biệt để tạo ra một thiết kế đáp ứng.
| Sr không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | w3-half Thiết lập các container để chiếm 1/2 nd của cửa sổ trên các thiết bị màn hình lớn vừa hay. Nếu màn hình nhỏ hơn 601 pixel, thì màn hình đó sẽ thay đổi kích thước vùng chứa thành 100%. |
| 2 | w3-third Thiết lập các container để chiếm 1/3 thứ của cửa sổ trên các thiết bị màn hình lớn vừa hay. Nếu màn hình nhỏ hơn 601 pixel, thì màn hình đó sẽ thay đổi kích thước vùng chứa thành 100%. |
| 3 | w3-quarter Thiết lập các container để chiếm 1/4 ngày của cửa sổ trên các thiết bị màn hình lớn vừa hay. Nếu màn hình nhỏ hơn 601 pixel, thì màn hình đó sẽ thay đổi kích thước vùng chứa thành 100%. |
| 4 | w3-col Chỉ định một cột trong lưới 12 cột. |
| 5 | w3-row Chỉ định một vùng chứa không có phần đệm sẽ được sử dụng cho các lớp đáp ứng. Lớp này là bắt buộc để các lớp đáp ứng có thể đáp ứng hoàn toàn. |
Thí dụ
w3css_responsive_design.htm
<html>
<head>
<title>The W3.CSS Containers</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
</head>
<body>
<header class = "w3-container w3-teal">
<h2>Mobile First Design Demo</h2>
<p class = "w3-large">Resize the window to see the effect!</p>
</header>
<br/>
<div class = "w3-row w3-border">
<div class = "w3-container w3-half w3-red">
<h2>w3-half</h2>
<p>Sets the container to occupy 1/2<sup>nd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
</div>
<div class = "w3-container w3-half">
<h2>w3-half</h2>
</div>
</div>
<br/>
<div class = "w3-row w3-border">
<div class = "w3-container w3-third w3-red">
<h2>w3-third</h2>
<p>Sets the container to occupy 1/3<sup>rd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
</div>
<div class = "w3-container w3-third">
<h2>w3-third</h2>
</div>
</div>
<br/>
<div class = "w3-row w3-border">
<div class = "w3-container w3-quarter w3-red">
<h2>w3-quarter</h2>
<p>Sets the container to occupy 1/4<sup>th</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
</div>
<div class = "w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>
</body>
</html>Kết quả
Xác minh kết quả.