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
rest
1/4
rest
100px
45px
rest
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 | 在小屏幕上隐藏内容（小于 601 像素） |
| w3-hide-medium | 在中等屏幕上隐藏内容 |
| w3-hide-large | 在大屏幕（大于 992 像素）上隐藏内容 |
| l1 - l12 | 大屏幕的响应尺寸 |
| m1 - m12 | 中等屏幕的响应尺寸 |
| s1 - s12 | 小屏幕的响应尺寸 |
w3-half 类
w3-half类的宽度是父元素 (style="width:50%") 的1/2。
在小于 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类的宽度是父元素（style="width:33.33%"）的1/3。
在小于 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>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 类将占据剩余的宽度:
I am 150px
I am the 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 属性以百分比设置宽度:
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 最大宽度属性覆盖默认宽度 (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 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 1334 像素的 iPhone 6 视为 375 x 667 像素 DP 的小屏幕。
小屏小于601像素DP，中屏小于993像素DP。
下面是典型设备分辨率和报告的 DP 大小的列表:
Iphone 4
Resolution
640 x 960
DP
320 x 480
Iphone 5
Resolution
640 x 1136
DP
320 x 528
Iphone 6
Resolution
750 x 1334
DP
375 x 667
Iphone 6s
Resolution
1080 x 1920
DP
414 x 736
Galaxy S6
Resolution
1440 x 2560
DP
360 x 640
Note 4
Resolution
1440 x 2560
DP
400 x 853
Nexus 6
Resolution
1440 x 2560
DP
411 x 731
iPad Mini
Resolution
768 x 1024
DP
768 x 1024
iPad
Resolution
1536 x 2048
DP
768 x 1024
Typical Laptop
Resolution
1366 x 768
DP
1366 x 768
Typical Desktop
Resolution
1920 x 1080
DP
1920 x 1080
12 列响应式流体网格
W3.CSS 还支持先进的 12 列响应式流体网格。
调整页面大小看看效果吧！
这部分会在小屏幕上占据12栏， 4 个在中屏幕上，3 个在大屏幕上。
这部分会在小屏幕上占据12栏， 8 个在中屏幕上，9 个在大屏幕上。
您将在后面的章节中学到更多关于流体网格的知识。
