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 列。
您將在後面的章節中學習更多關於流體網格的知識。
