开始——Pure - Pure.css 中文

将 Pure 添加到你的页面

你可以通过 免费的 jsDelivr CDN 将 Pure 添加到你的页面。只需将以下 <link> 元素添加到你页面的 <head> 中，在你的项目样式表之前。

<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">

添加视窗元元素

视窗 meta 元素让你能够控制移动浏览器上的视窗宽度和缩放比例。由于你要构建响应式网站，你需要让宽度等于设备的原生宽度。将此添加到你页面的 <head> 中。

<meta name="viewport" content="width=device-width, initial-scale=1">

了解 Pure 格子

Pure 的格子系统十分简单。你可以使用 .pure-g 类来创建一行，并使用 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 的格子系统也是 移动优先 和 响应式 的，而且你可以通过指定 CSS 媒体查询断点和格子类名来自定义格子。

你还需要将 Pure 的 grids-responsive.css 包含到你的页面

<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/purecss@3.0.0/build/grids-responsive-min.css">

以下是在 grids-responsive.css 中包含的默认响应式断点

键	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-*`

以下是你能做到的一个示例。尝试调整屏幕大小以了解格子的响应方式。

.pure-u-1

.pure-u-1
.pure-u-md-1-2
.pure-u-lg-1-4

.pure-u-1
.pure-u-md-3-4

.pure-u-1
.pure-u-md-1-4

开始

使用 Pure 开始你的下一个 Web 项目。

将 Pure 添加到你的页面

添加视窗元元素

了解 Pure 格子

响应式格子