免費AI編程助手
W3.CSS Built-In Responsiveness (響應式)
W3.CSS的網(wǎng)格系統(tǒng)是響應式的，并且各列將根據(jù)屏幕大小自動重新排列：
| 類 | 描述 |
|---|---|
| w3-half | 占用窗口的1/2（在大屏幕和大屏幕上） |
| w3-third | 占據(jù)窗口的1/3（在大屏幕和大屏幕上） |
| w3-twothird
|
占用窗口的2/3（在大屏幕和大屏幕上） |
| w3-quarter
|
占用窗口的1/4（在大屏幕和大屏幕上） |
| w3-threequarter
|
占用窗口的3/4（在大屏幕和大屏幕上） |
| w3-rest
|
占用列的其余寬度 |
| w3-col
|
在12列響應式網(wǎng)格中定義一列 |
| w3-mobile
|
向單元格（列）添加移動優(yōu)先響應。
在移動設備上將元素顯示為塊元素。 |
上面的響應類必須放置在 w3-row類（或 w3-row-padding 類）中，才能完全響應。
| 類 | 描述 |
|---|---|
| w3-row
|
響應式類的容器，無填充 |
| w3-row-padding
|
響應類的容器，左右填充為 8px |
| w3-content
|
固定大小居中內(nèi)容的容器 |
| w3-hide-small
|
在小屏幕（小于 601px ）上隱藏內(nèi)容 |
| w3-hide-medium
|
在中等屏幕上隱藏內(nèi)容 |
| w3-hide-large
|
在大屏幕（大于 992px ）上隱藏內(nèi)容 |
| l1 - l12
|
大屏幕的自適應尺寸 |
| m1 - m12
|
中型屏幕的響應大小 |
| s1 - s12
|
小屏幕的自適應尺寸 |
w3-half 類
w3-half類的寬度是父元素的 1/2（style =“ width：50％”）。
在小于 601px 的屏幕上，其尺寸會調(diào)整為 100％。
實例
<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％”）。
在小于 601px 的屏幕上，其尺寸會調(diào)整為 100％。
實例
<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％”）。
在小于 601px 的屏幕上，其尺寸會調(diào)整為 100％。
實例
<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％”）。
在小于 601px 的屏幕上，其尺寸會調(diào)整為 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-threequarter 類
w3-threequarter 類的寬度是父元素的 3/4（style =“ width：75％”）。
在小于 601px 的屏幕上，其尺寸會調(diào)整為 100％。
實例
<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-half 內(nèi)部使用 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 列響應網(wǎng)格定義了一列。
w3-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 屬性以百分比形式設置寬度：
實例
<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 類定義固定大小的容器中心的內(nèi)容。使用 CSS max-width 屬性覆蓋默認寬度（ 980px ）。
實例
<body class="w3-content" style="max-width:500px">
page content...
</body>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
w3-row vs w3-row-padding
w3-row 類定義了一個容器，沒有填充，而 w3-row-padding 類添加一個 8px 的左和右填充到每個列：
實例
<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 類去除的元素右和左邊緣。此類通常用于拉伸填充行：
實例
<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 類隱藏特定的屏幕尺寸的元件。
注意：調(diào)整瀏覽器窗口的大小以了解其工作原理：
實例
<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的內(nèi)置響應能力使用屏幕的 DP 尺寸。
W3.CSS將分辨率為 750 x 1334px 的 iPhone 6 視為 375 x 667px DP 的小屏幕。
小屏幕小于 601px DP，中型屏幕小于 993px D??P。
以下是典型設備分辨率和報告的 DP 大小的列表：
iphone 4
分辨率640 × 960
DP
320 × 480
iphone 5
分辨率640 × 1136
DP
320 × 528
iphone 6
分辨率750 × 1334
DP
375 × 667
iphone 6s
分辨率1080 × 1920
DP
414 × 736
Galaxy S6
分辨率1440 × 2560
DP
360 × 640
Note 4
分辨率1440 × 2560
DP
400 × 853
Nexus 6
分辨率1440 × 2560
DP
400 × 853
iPad Mini
分辨率768 × 1024
DP
768 × 1024
iPad
分辨率1536 × 2048
DP
768 × 1024
典型筆記本電腦
分辨率1366 × 768
DP
1366 × 768
典型臺式電腦
分辨率1920 × 1080
DP
1920 × 1080
12列響應式流體網(wǎng)格
W3.CSS 還支持高級的 12 列響應式流體網(wǎng)格。
調(diào)整頁面大小以查看效果！
實例
<div class="w3-col m1 w3-center w3-grey"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">1個</font></font></div>
<div class="w3-col m1 w3-center"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">2</font></font></div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
更多建議：