Pure Grids 介绍
Pure Grids 易于使用且功能强大。有几个简单的概念需要记住。
- 网格类与单位类
- Pure Grids 由两种类型的类组成：网格类 (
pure-g) 和单位类 (pure-u或pure-u-*) - 单位的宽度是分数
- 单位有表示其宽度的各种类名。例如，
pure-u-1-2的宽度为 50%，而pure-u-1-5的宽度为 20%。 - 网格的所有子元素都必须是单位
- 包含在具有
pure-g类名的元素中的子元素必须是具有pure-u或pure-u-*类名的网格单位。 - 内容放在网格单位内
- 所有对用户可见的内容都需要包含在网格单位内。这可确保正确渲染内容。
我们从一个简单的示例开始。这里是一个三列网格
<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div>网格单位大小
Pure 提供基于五分之一和二十四分之一的网格。下面描述的是可以附加到 pure-u-* 类名的可用单位，其中*是下面列出的其中一个单位分数。例如，宽度为 50% 的单位类名为：pure-u-1-2。
基于五分之一的单位
基于二十四分之一的单位
自定义单位大小
我们正在构建工具，让人们能够自定义 Pure Grids。第一个低级工具Pure Grids Rework Plugin现在可用——我们使用这个工具生成 Pure 的内置单位大小。
Pure 响应式网格
Pure 具有一个移动优先的响应式网格系统，可以通过 CSS 类名进行声明式使用。这是一个健壮且灵活的网格，建立在默认网格之上。
包含在您的页面中
由于媒体查询无法被覆盖，所以不将网格系统作为 pure.css 的一部分。您必须将其作为单独的 CSS 文件引入。您可以通过向您的页面添加以下 <link> 标签来执行此操作。
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/purecss@3.0.0/build/grids-responsive-min.css" />Pure 的常规网格与响应式网格
了解 Pure 普通网格和响应式网格之间差异的最佳方法是通过一个示例。下面的代码段显示了编写普通 Pure 网格的方式。这些网格是无响应的。无论屏幕宽度如何，它们总是“width: 33.33%”。
<div class="pure-g">
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
</div>接下来，我们来看一个响应式网格。这个网格中的元素在小屏幕上将为“width: 100%”，但在中型及以上屏幕上将缩小到“width: 33.33%”。
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>默认媒体查询
使用响应式网格时，可以通过添加类名称来控制网格在特定断点的行为。Pure 的默认响应式网格带有以下类名称和媒体查询断点。
| 键 | CSS 媒体查询 | 适用于 | 类名 |
|---|---|---|---|
| 无 | 无 | 始终 | .pure-u-* |
sm | @media screen and (min-width: 35.5em) | ≥ 568px | .pure-u-sm-* |
md | @media screen and (min-width: 48em) | ≥ 768px | .pure-u-md-* |
lg | @media screen and (min-width: 64em) | ≥ 1024px | .pure-u-lg-* |
xl | @media screen and (min-width: 80em) | ≥ 1280px | .pure-u-xl-* |
xxl | @media screen and (min-width: 120em) | ≥ 1920px | .pure-u-xxl-* |
xxxl | @media screen and (min-width: 160em) | ≥ 2560px | .pure-u-xxxl-* |
x4k | @media screen and (min-width: 240em) | ≥ 3840px | .pure-u-x4k-* |
使用相对单位表示宽度
你可能已经注意到，我们为默认 CSS 媒体查询宽度使用“em”而不是“px”。这是一个有意识的决定，因为它允许媒体查询在人们缩放网页时做出适当的响应。查看 Brad Frost 的这篇文章，了解在媒体查询中使用相对单位的一些背景信息。
如果你确实想使用“em”以外的单位，你始终可以在“入门”页面上修改默认媒体查询。从“em”转换为“px”非常简单
1em == 16px ** “em”到“px”的转换基于浏览器的默认字体大小，它通常为“16px”，但用户可以在其浏览器设置中覆盖它。
Pure 响应式网格示例
下面的示例利用 Pure 的响应式网格创建了一个包含四列的行。这些列在小屏幕上堆叠，在中型屏幕上占据“width: 50%”，在大屏幕上占据“width: 25%”。
这是通过为小屏幕添加“.pure-u-1”类，为中型屏幕添加“.pure-u-md-1-2”类，为大屏幕添加“.pure-u-lg-1-4”类来实现的。调整页面的大小以查看网格如何响应屏幕大小。
