W3.CSS具有几个特殊的类来创建响应式设计。
| 序号 | 类名和描述 |
|---|---|
| 1个 | w3-half 将容器设置为在中型或大型屏幕设备上占据窗口的1/2倍。如果屏幕小于601像素，则它将容器的大小调整为100％。 |
| 2 | w3-third 设置容器占据1/3 RD上中型或大型屏幕设备窗口。如果屏幕小于601像素，则它将容器的大小调整为100％。 |
| 3 | w3-quarter 设置容器占据1/4个上中型或大型屏幕设备窗口。如果屏幕小于601像素，则它将容器的大小调整为100％。 |
| 4 | w3-col 在12列网格中指定一列。 |
| 5 | w3-row 指定用于响应类的无填充容器。此类对于响应式类是完全响应式是必需的。 |
例
<html>
<head>
<title>The W3.CSS Containers</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
</head>
<body>
<header class = "w3-container w3-teal">
<h2>Mobile First Design Demo</h2>
<p class = "w3-large">Resize the window to see the effect!</p>
</header>
<br/>
<div class = "w3-row w3-border">
<div class = "w3-container w3-half w3-red">
<h2>w3-half</h2>
<p>Sets the container to occupy 1/2<sup>nd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
</div>
<div class = "w3-container w3-half">
<h2>w3-half</h2>
</div>
</div>
<br/>
<div class = "w3-row w3-border">
<div class = "w3-container w3-third w3-red">
<h2>w3-third</h2>
<p>Sets the container to occupy 1/3<sup>rd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
</div>
<div class = "w3-container w3-third">
<h2>w3-third</h2>
</div>
</div>
<br/>
<div class = "w3-row w3-border">
<div class = "w3-container w3-quarter w3-red">
<h2>w3-quarter</h2>
<p>Sets the container to occupy 1/4<sup>th</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
</div>
<div class = "w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>
</body>
</html>作者：terry，如若转载，请注明出处：https://www.web176.com/w3css/938.html
支付宝 
微信 