W3.CSS 内置响应式
W3.CSS 包含一个响应式、移动优先的网格系统来处理布局
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
其余
1/4
其余
100px
45px
其余
W3.CSS 响应式类
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%"）。
在小于 601 像素的屏幕上，它会调整为 100%。
w3-half
w3-half
示例
<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%"）。
在小于 601 像素的屏幕上，它会调整为 100%。
w3-third
w3-third
w3-third
示例
<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%"）。
在小于 601 像素的屏幕上，它会调整为 100%。
w3-twothird
w3-third
示例
<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%"）。
在小于 601 像素的屏幕上，它会调整为 100%。
w3-quarter
w3-quarter
w3-quarter
w3-quarter
示例
<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%"）。
在小于 601 像素的屏幕上，它会调整为 100%。
w3-threequarter
w3-quarter
示例
<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-quarter
w3-half
w3-quarter
w3-quarter
w3-quarter
w3-half
w3-half
w3-quarter
w3-quarter
嵌套行
示例：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>这是一个段落。</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>这是一个段落。</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>这是一个段落。</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>这是一个段落。</p>
</div>
</div>
</div>
</div>
亲自试一下 »
使用 Rest 的列
w3-col 类在 12 列响应式网格中定义一列。
w3-rest 类将占用剩余的宽度
我 150px
我是其余的
示例
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>我 150px</p></div>
<div class="w3-rest w3-green"><p>我是其余的</p></div>
</div>
亲自试一下 »
使用百分比的列
您也可以使用 CSS width 属性以百分比设置宽度
20%
60%
20%
示例
<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)。
w3-row vs. w3-row-padding
w3-row 类定义一个没有填充的容器，而 w3-row-padding 类为每一列添加 8px 的左右填充
w3-row
w3-third
w3-third
w3-third
w3-row-padding
w3-third
w3-third
w3-third
w3-row
w3-row-padding
示例
<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 类会移除元素的左右边距。此类常用于拉伸带填充的行
带有 w3-stretch 的示例
没有 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 将在小型屏幕上隐藏（手机）</p>
</div>
<div class="w3-container w3-hide-medium w3-green">
<p>w3-hide-medium 将在中等屏幕上隐藏（平板电脑）</p>
</div>
<div class="w3-container w3-hide-large w3-blue">
<p>w3-hide-large 将在大型屏幕上隐藏（笔记本电脑/台式机）</p>
</div>
亲自试一下 »
w3-mobile 类
w3-mobile 类为任何元素添加移动优先响应式。
它在宽度小于 600px 的屏幕上为元素添加 display:block 和 width:100%。
屏幕分辨率
W3.CSS 的内置响应式使用屏幕的 DP 大小。
W3.CSS 会将分辨率为 750 x 1334 像素的 iPhone 6 视为 375 x 667 像素 DP 的小型屏幕。
小屏幕尺寸小于 601 像素 DP，中等屏幕尺寸小于 993 像素 DP。
以下是典型设备分辨率和报告的 DP 尺寸列表。
iPhone 4
分辨率
640 x 960
DP
320 x 480
iPhone 5
分辨率
640 x 1136
DP
320 x 528
iPhone 6
分辨率
750 x 1334
DP
375 x 667
iPhone 6s
分辨率
1080 x 1920
DP
414 x 736
Galaxy S6
分辨率
1440 x 2560
DP
360 x 640
Note 4
分辨率
1440 x 2560
DP
400 x 853
Nexus 6
分辨率
1440 x 2560
DP
411 x 731
iPad Mini
分辨率
768 x 1024
DP
768 x 1024
iPad
分辨率
1536 x 2048
DP
768 x 1024
典型笔记本电脑
分辨率
1366 x 768
DP
1366 x 768
典型台式电脑
分辨率
1920 x 1080
DP
1920 x 1080
12 列响应式流体网格
W3.CSS 还支持一个先进的 12 列响应式流体网格。
调整页面大小以查看效果！
这部分在小屏幕上将占据 12 列，中等屏幕上将占据 4 列，大屏幕上将占据 3 列。
这部分在小屏幕上将占据 12 列，中等屏幕上将占据 8 列，大屏幕上将占据 9 列。
你将在后面的章节中学习更多关于流体网格的知识。
