srcminiPure.CSS使用以下类创建响应式设计。
| Index | Class Name | Description |
|---|---|---|
| 1) | .pure-u-* | 它用于设置容器以占用任何设备上的所需空间(所有设备兼容)。 |
| 2) | .pure-u-sm- * | 它用于小屏幕。它将容器设置为在宽度为？的设备上占据所需空间。 568px。 |
| 3) | .pure-u-md- * | 它用于中型屏幕。它将容器设置为在宽度为？的设备上占据所需空间。 768像素。 |
| 4) | .pure-u-lg- * | 它用于大屏幕。它将容器设置为在宽度为？的设备上占据所需空间。 1024px。 |
| 5) | .pure-u-xl-* | 用于超大屏幕。它将容器设置为在宽度为？的设备上占据所需空间。 1280像素。 |
例子
让我们创建一个包含四列的响应式网格。列应堆叠在小屏幕上, 应占据宽度：在中型屏幕上占50％, 在宽屏幕上应占占25％。
对于小屏幕, 我们添加：.pure-u-1类
对于中型屏幕, 我们添加：.pure-u-md-1-2
对于大尺寸屏幕：.pure-u-lg-1-4
请参阅以下示例：
<html>
<head>
<title>The PURE.CSS Containers</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet"
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
graybox {
background: rgb(240, 240, 240);
border: 1px solid red;
}
</style>
</head>
<body>
<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>
</body>
</html>立即测试
看起来像这样：
输出
评论前必须登录！
注册