敏感类
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半 | 占据了窗口的1/2（中等和大屏幕） |
| W3三分 | 占据了窗口的1/3（中等和大屏幕） |
| W3-twothird | 占据了窗口的2/3（中等和大屏幕） |
| W3季度 | 占据了窗口的1/4（中等和大屏幕） |
| W3-threequarter | 占据了窗口的3/4（中等和大屏幕） |
| W3-休息 | 定义的行的其余部分 |
| W3-COL | 在12列响应流体网格（更多在后面的章节）定义的列 |
响应行
敏感类必须放在一个W3-行内是充分响应。
| 类 | 描述 |
|---|---|
| W3行 | 定义响应类的填充少容器。 |
| W3-行填充 | 定义响应班填充容器。 |
W3的半级
在W3半级的宽度是父元素（样式=“WIDTH：50％”）的1/2。
在小屏幕上*它调整为100％。
W3半
W3半
例
<div class="w3-row">
<div class="w3-green w3-container w3-half">
<h2>w3-half</h2>
</div>
<div class="w3-container w3-half">
<h2>w3-half</h2>
</div>
</div> 试一试» 在W3-第三类
在W3-三等的宽度是父元素（样式=“WIDTH：33.33％”）的1/3。
在小屏幕上*它调整为100％。
W3三分
W3三分
W3三分
使用W3-第三个例子
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> 试一试» 在W3-twothird类
在W3-twothird类的宽度是父元素（样式=“WIDTH：66.66％”）的2/3。
在小屏幕上*它调整为100％。
W3-twothird
W3三分
使用W3-第三个例子
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> 试一试» W3的季度级
W3的季度级的宽度是父元素（样式=“WIDTH：25％”）的1/4。
在小屏幕上*它调整为100％。
W3季度
W3季度
W3季度
W3季度
使用W3季度例
<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类的宽度是父元素（样式=“WIDTH：75％”）的3/4。
在小屏幕上*它调整为100％。
W3季度
W3季度
使用W3-threequarter例
<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季度
W3季度
W3半
W3半
W3季度
W3季度
嵌套行
例如：W3半内W3一半
<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
我为150px
我休息
使用W3-REST示例
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest
w3-green"><p>rest</p></div>
</div> 试一试» 列使用百分比
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的内容类
W3的内容类定义为固定大小为中心内容的容器：
W3-行和W3-行填充的区别
W3的行类定义了一个软垫少的容器，而W3-行填充类增加了一个8像素左右填充到每一列：
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_fjords.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_fjords.jpg"></div>
</div> 试一试» 12列响应电网液
W3.CSS还支持先进的12列响应流体网格。
调整页面大小，看看效果！
这部分将占有相当大的屏幕上的一个小屏幕，4上的介质屏幕上12列，和3。
这部分将占有相当大的屏幕上的一个小屏幕，8上的介质屏幕上12列，和9。
您将了解更多有关流体网格在后面的章节。
*屏幕分辨率
W3.CSS的内置响应使用一个屏幕的DP的大小。
W3.CSS将把一个iPhone 6的750点¯x1334像素的分辨率为375点¯x667像素的小屏幕。
小屏幕是小于601的像素的DP，介质屏幕是小于993的像素的DP。
下面是典型的设备分辨率列表，并报告DP大小：
iPhone 4
解析度
640×960
DP
320×480
iphone 5
解析度
640×1136
DP
320×528
iPhone 6
解析度
750点¯x1334
DP
375点¯x667
iPhone 6S
解析度
1080点¯x1920
DP
414点¯x736
银河S6
解析度
1440点¯x2560
DP
360°×640
注4
解析度
1440点¯x2560
DP
400×853
的Nexus 6
解析度
1440点¯x2560
DP
411点¯x731
小型平板电脑
解析度
768×1024
DP
768×1024
iPad的
解析度
1536×2048
DP
728×1024
典型的笔记本电脑
解析度
1366 * 768
DP
1366 * 768
典型的桌面
解析度
1920×1080
DP
1920×1080