Pure.CSS堆叠形式

Pure.CSS是一种轻量级CSS框架，专注于提供易于使用的基本样式和布局。它不依赖于JavaScript，具有响应式设计，并且与各种现代浏览器兼容。Pure.CSS的堆叠形式是其最常用的布局之一，它允许我们快速创建针对移动设备和桌面浏览器的响应式单列布局。

安装

要使用Pure.CSS，您可以通过以下方式访问其CDN：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css">

您也可以将其下载到本地并将其引入到您的HTML文件中。

堆叠形式的使用

要创建Pure.CSS堆叠布局，您需要使用pure-u-*类。这些类可用于指定要分配给每个元素的列宽。例如，如果您有三个元素，每个元素的宽度应该是33.33％，则可以使用以下代码：

<div class="pure-u-1-3">Element 1</div>
<div class="pure-u-1-3">Element 2</div>
<div class="pure-u-1-3">Element 3</div>

在这个例子中，pure-u-1-3类将分配每个元素相等宽度的33.33％。在移动设备上，这些元素将垂直堆叠在一起，而在桌面浏览器上则会水平排列在一行中。

如果您想要添加媒体查询以在特定屏幕宽度下更改布局，则可以使用Pure.CSS内置的响应式网格。以下是一个示例，当屏幕宽度小于768px时，元素将垂直堆叠在一起：

<div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-3">Element 1</div>
  <div class="pure-u-1 pure-u-md-1-3">Element 2</div>
  <div class="pure-u-1 pure-u-md-1-3">Element 3</div>
</div>

在这个例子中，pure-g类创建一个响应式网格容器，pure-u-1类在所有屏幕宽度下分配每个元素100％的宽度，并且在屏幕宽度为中等以上时，pure-u-md-1-3类会在每个元素之间分配相等宽度的33.33％。

总结

Pure.CSS的堆叠形式是一种快速创建响应式单列布局的方法，并且可以通过使用内置的响应式网格容器轻松实现类似Bootstrap的响应式设计。Pure.CSS还提供了许多其他非常有用的类和组件，可以使用它们来构建漂亮的用户界面。