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 与 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 视为 DP 为 375 x 667 像素的小屏幕。
小屏幕小于 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 列。
您将在后面的章节中学习更多关于流体网格的知识。
