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
50像素
休息
1/4
休息
100像素
45像素
休息
W3.CSS 响应类
W3.CSS 的网格系统是响应式的，列将根据屏幕尺寸自动重新排列：
| 类 | 描述 |
|---|---|
| w3-半 | 占据窗口的 1/2（在中型和大屏幕上） |
| w3-第三 | 占据窗口的 1/3（在中型和大屏幕上） |
| w3-三分之二 | 占据窗口的 2/3（在中型和大屏幕上） |
| 第三季度 | 占据窗口的 1/4（在中型和大屏幕上） |
| w3-四分之三 | 占据窗口的 3/4（在中型和大屏幕上） |
| w3-休息 | 占据其余的列宽 |
| w3-列 | 定义 12 列响应式网格中的一列 |
| w3-移动 | 向单元格（列）添加移动优先响应能力。 在移动设备上将元素显示为块元素。 |
上面的响应类必须放置在w3行类（或w3 行填充类）充分响应。
| 类 | 描述 |
|---|---|
| w3行 | 响应式类的容器，没有填充 |
| w3 行填充 | 响应式类的容器，左右填充 8 像素 |
| w3-内容 | 用于固定大小居中内容的容器 |
| w3-隐藏-小 | 隐藏小屏幕上的内容（小于 601 像素） |
| w3-隐藏-中 | 在中等屏幕上隐藏内容 |
| w3-隐藏-大 | 隐藏大屏幕（大于 992 像素）上的内容 |
| l1 - l12 | 适用于大屏幕的响应式尺寸 |
| m1 - m12 | 适合中型屏幕的自适应尺寸 |
| s1 - s12 | 适合小屏幕的自适应尺寸 |
w3半级
的宽度w3-半class 是父元素的 1/2 (style="width:50%")。
在小于 601 像素的屏幕上，它会将大小调整为 100%。
w3-半
w3-半
示例
<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-三级
的宽度w3-第三class 是父元素的 1/3 (style="width:33.33%")。
在小于 601 像素的屏幕上，它会将大小调整为 100%。
w3-第三
w3-第三
w3-第三
示例
<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-三分之二类
的宽度w3-三分之二class 是父元素的 2/3 (style="width:66.66%")。
在小于 601 像素的屏幕上，它会将大小调整为 100%。
w3-三分之二
w3-第三
示例
<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季度班
的宽度第三季度class 是父元素的 1/4 (style="width:25%")。
在小于 601 像素的屏幕上，它会将大小调整为 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-四分之三级
的宽度w3-四分之三class 是父元素的 3/4 (style="width:75%")。
在小于 601 像素的屏幕上，它会将大小调整为 100%。
w3-四分之三
第三季度
示例
<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-半
第三季度
第三季度
第三季度
w3-半
w3-半
第三季度
第三季度
嵌套行
示例：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>
亲自试一试»
使用休息的列
这个w3-列类定义 12 列响应式网格中的一列。
这个w3-休息类将占据剩余的宽度：
我是150px
我是其余的
示例
<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 属性来设置宽度（以百分比为单位）：
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-内容类定义固定大小居中内容的容器。使用 CSS max-width 属性覆盖默认宽度 (980px)。
w3-row 与 w3-row-padding
这个w3行类定义了一个没有填充的容器，而w3 行填充类为每列添加 8px 左右填充：
w3行：
w3-第三
w3-第三
w3-第三
w3 行填充：
w3-第三
w3-第三
w3-第三
w3行：
w3 行填充：
示例
<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-拉伸class 删除元素的右边距和左边距。此类通常用于拉伸填充行：
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-隐藏-小,w3-隐藏-中， 和w3-隐藏-大类隐藏特定屏幕尺寸上的元素。
笔记：调整浏览器窗口大小以了解其工作原理：
示例
<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-移动类
这个w3-移动类为任何元素添加了移动优先响应能力。
它将 display:block 和 width:100% 添加到宽度小于 600px 的屏幕上的元素。
屏幕分辨率
W3.CSS 的内置响应能力使用屏幕的 DP 尺寸。
W3.CSS 会将分辨率为 750 x 1334 像素的 iPhone 6 视为 375 x 667 像素 DP 的小屏幕。
小屏幕的 DP 小于 601 像素，中屏幕的 DP 小于 993 像素。
以下是典型设备分辨率和报告的 DP 尺寸的列表：
苹果4
解决
640×960
DP
320×480
iphone 5
解决
640×1136
DP
320×528
iPhone 6
解决
750×1334
DP
375×667
苹果6s
解决
1080×1920
DP
414×736
银河S6
解决
1440×2560
DP
360×640
注4
解决
1440×2560
DP
400×853
Nexus 6
解决
1440×2560
DP
411×731
小型平板电脑
解决
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 列响应式流体网格。
调整页面大小看看效果！
该部分在小屏幕上将占据 12 列，在中屏幕上占据 4 列，在大屏幕上占据 3 列。
该部分在小屏幕上将占据 12 列，在中屏幕上占据 8 列，在大屏幕上占据 9 列。
您将在后面的章节中了解有关流体网格的更多信息。