免费AI编程助手
W3.CSS Built-In Responsiveness (响应式)
W3.CSS的网格系统是响应式的，并且各列将根据屏幕大小自动重新排列：
| 类 | 描述 |
|---|---|
| w3-half | 占用窗口的1/2（在大屏幕和大屏幕上） |
| w3-third | 占据窗口的1/3（在大屏幕和大屏幕上） |
| w3-twothird
|
占用窗口的2/3（在大屏幕和大屏幕上） |
| w3-quarter
|
占用窗口的1/4（在大屏幕和大屏幕上） |
| w3-threequarter
|
占用窗口的3/4（在大屏幕和大屏幕上） |
| w3-rest
|
占用列的其余宽度 |
| w3-col
|
在12列响应式网格中定义一列 |
| w3-mobile
|
向单元格（列）添加移动优先响应。
在移动设备上将元素显示为块元素。 |
上面的响应类必须放置在 w3-row类（或 w3-row-padding 类）中，才能完全响应。
| 类 | 描述 |
|---|---|
| w3-row
|
响应式类的容器，无填充 |
| w3-row-padding
|
响应类的容器，左右填充为 8px |
| w3-content
|
固定大小居中内容的容器 |
| w3-hide-small
|
在小屏幕（小于 601px ）上隐藏内容 |
| w3-hide-medium
|
在中等屏幕上隐藏内容 |
| w3-hide-large
|
在大屏幕（大于 992px ）上隐藏内容 |
| l1 - l12
|
大屏幕的自适应尺寸 |
| m1 - m12
|
中型屏幕的响应大小 |
| s1 - s12
|
小屏幕的自适应尺寸 |
w3-half 类
w3-half类的宽度是父元素的 1/2（style =“ width：50％”）。
在小于 601px 的屏幕上，其尺寸会调整为 100％。
实例
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
w3-third 类
w3-third 类的宽度是父元素的 1/3（style =“ width：33.33％”）。
在小于 601px 的屏幕上，其尺寸会调整为 100％。
实例
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
w3-twothird 类
w3-twothird 类的宽度是父元素的 2/3（style =“ width：66.66％”）。
在小于 601px 的屏幕上，其尺寸会调整为 100％。
实例
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
w3-quarter 类
w3-quarter 类的宽度是父元素的 1/4（style =“ width：25％”）。
在小于 601px 的屏幕上，其尺寸会调整为 100％。
实例
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
w3-threequarter 类
w3-threequarter 类的宽度是父元素的 3/4（style =“ width：75％”）。
在小于 601px 的屏幕上，其尺寸会调整为 100％。
实例
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
嵌套行
实例：w3-half 内部使用 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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
使用 Rest 列
w3-col 类在 12 列响应网格定义了一列。
w3-rest 类将占用其余宽度：
实例
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
列使用百分比
您还可以使用 CSS width 属性以百分比形式设置宽度：
实例
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
w3-content 类
w3-content 类定义固定大小的容器中心的内容。使用 CSS max-width 属性覆盖默认宽度（ 980px ）。
实例
<body class="w3-content" style="max-width:500px">
page content...
</body>
尝试一下 »
点击“尝试一下”按钮查看在线实例
w3-row vs w3-row-padding
w3-row 类定义了一个容器，没有填充，而 w3-row-padding 类添加一个 8px 的左和右填充到每个列：
实例
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
拉伸填充行
w3-stretch 类去除的元素右和左边缘。此类通常用于拉伸填充行：
实例
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
响应式显示/隐藏
w3-hide-small, w3-hide-medium, w3-hide-large 类隐藏特定的屏幕尺寸的元件。
注意：调整浏览器窗口的大小以了解其工作原理：
实例
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
w3-mobile 类
w3-mobile类添加移动第一响应性的任何元件。
它将 display：block 和 width：100％ 添加到屏幕宽度小于 600px 的元素上。
屏幕分辨率
W3.CSS的内置响应能力使用屏幕的 DP 尺寸。
W3.CSS将分辨率为 750 x 1334px 的 iPhone 6 视为 375 x 667px DP 的小屏幕。
小屏幕小于 601px DP，中型屏幕小于 993px DP。
以下是典型设备分辨率和报告的 DP 大小的列表：
iphone 4
分辨率640 × 960
DP
320 × 480
iphone 5
分辨率640 × 1136
DP
320 × 528
iphone 6
分辨率750 × 1334
DP
375 × 667
iphone 6s
分辨率1080 × 1920
DP
414 × 736
Galaxy S6
分辨率1440 × 2560
DP
360 × 640
Note 4
分辨率1440 × 2560
DP
400 × 853
Nexus 6
分辨率1440 × 2560
DP
400 × 853
iPad Mini
分辨率768 × 1024
DP
768 × 1024
iPad
分辨率1536 × 2048
DP
768 × 1024
典型笔记本电脑
分辨率1366 × 768
DP
1366 × 768
典型台式电脑
分辨率1920 × 1080
DP
1920 × 1080
12列响应式流体网格
W3.CSS 还支持高级的 12 列响应式流体网格。
调整页面大小以查看效果！
实例
<div class="w3-col m1 w3-center w3-grey"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">1个</font></font></div>
<div class="w3-col m1 w3-center"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">2</font></font></div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
更多建议：