Pure.CSS响应式设计
PURE.CSS有几个特殊的类来创建一个响应式设计。
| S.N. | 类名称和描述 |
|---|---|
| 1 | .pure-u- 将容器设置为在任何设备上占用所需的空间。 |
| 2 | .pure-u-sm- 将容器设置为在宽度≥568像素的设备上占用所需的空间。 |
| 3 | .pure-u-md- 将容器设置为在宽度≥768像素的设备上占用所需的空间。 |
| 4 | .pure-u-lg- 设置容器占据与宽度≥1,024像素x一个设备所需的空间。 |
| 五 | .pure-u-xl-* 设置容器占据与宽度≥1280像素的设备上占用所需的空间。 |
在下面的例子中，我们将创建一个带有四列的行的响应式网格。 柱子应该堆叠在小屏幕上，在中型屏幕上应占据宽度：50％，在大屏幕上应占据宽度：25％。
这是通过为小屏幕添加.pure-u-1类，为中型屏幕添加.pure-u-md-1-2，为大屏幕添加.pure-u-lg-1-4。 调整页面大小以查看网格响应屏幕大小。
例
purecss_responsive_design.htm
<div class="grids-example"> <div class="pure-g"> <div class="pure-u-1-1"><div class="graybox"><p>These four columns should stack on small screens, should take up width: 50% on medium-sized screens, and should take up width: 25% on large screens.</p></div></div> <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="graybox"><p>First Column</p></div></div> <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="graybox"><p>Second Column</p></div></div> <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="graybox"><p>Third Column</p></div></div> <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="graybox"><p>Fourth Column</p></div></div> </div> </div> <div class="grids-example"> <div class="pure-g"> <div class="pure-u-1"><div class="graybox"><p>This column is to occupy the complete space of a row.</p></div></div> </div> </div> <div class="grids-example"> <div class="pure-g"> <div class="pure-u-2-5"><div class="graybox"><p>This column is to occupy the two-fifth of the space of a row.</p></div></div> </div> </div> <div class="grids-example"> <div class="pure-g"> <div class="pure-u-3-5"><div class="graybox"><p>This column is to occupy the three-fifth of the space of a row.</p></div></div> </div> </div> <div class="grids-example"> <div class="pure-g"> <div class="pure-u-1-3"><div class="graybox"><p>Column 1: This column is to occupy the one-third of the space of a row on all devices.</p></div></div> <div class="pure-u-1-3"><div class="graybox"><p>Column 2: This column is to occupy the one-third of the space of a row on all devices.</p></div></div> <div class="pure-u-1-3"><div class="graybox"><p>Column 3: This column is to occupy the one-third of the space of a row on all devices.</p></div></div> </div> </div>
结果
验证结果。
These four columns should stack on small screens, should take up width: 50% on medium-sized screens, and should take up width: 25% on large screens.
First Column
Second Column
Third Column
Fourth Column
This column is to occupy the complete space of a row.
This column is to occupy the two-fifth of the space of a row.
This column is to occupy the three-fifth of the space of a row.
Column 1: This column is to occupy the one-third of the space of a row on all devices.
Column 2: This column is to occupy the one-third of the space of a row on all devices.
Column 3: This column is to occupy the one-third of the space of a row on all devices.