Pure官方文档
Pure官方文档
阅读(3.3k) 书签 赞(0) 我要纠错

Pure开始使用

2018-09-21 18:18 更新

用Pure开始下一个Web项目。

将Pure添加到您的页面

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

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">

或者，您可以下载Pure，或查看承载Pure的其他CDN。

添加视口元素元素

视口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 Media Query断点和网格类名来自定义网格。如果需要，您可以在下面定制Pure网格，但是让我们开始一个例子。

您还需要将Pure包含grids-responsive.css在您的页面上：

<!--[if lte IE 8]>
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css" rel="external nofollow" target="_blank" >
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css" rel="external nofollow" target="_blank" >
<!--<![endif]-->

以下是默认的响应断点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)≥ 1,024像素.pure-u-lg-*
xl@media screen and (min-width: 80em)≥ 1280px.pure-u-xl-*

以下是您可以做的事情的例子。尝试调整屏幕大小以查看网格如何响应。

.pure-u-1
.pure-u-1
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-1
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-1
.pure-u-md-1-2
.pure-u-lg-1-4
.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的响应网格系统，以及它如何与基本网格进行比较。

构建您的Pure启动工具包

既然你知道网格如何工作，你可能需要自定义事情来更好地适应你的Web项目。您可以通过指定CSS Media Queries来定义自己的断点。您还可以自定义布局所需的列数。

我们将生成一个index.html文件，如果需要，grid.css可以下载并用作项目起点的文件。

网格媒体查询

您可以使用Pure的默认CSS媒体查询，这将添加grids-responsive.css到您的Pure Starter Kit中，或者如果您为我们提供断点，我们可以生成移动优先的响应式网格。

Pure产生的响应网格使用简单。它为每个媒体查询提供了一个特定的CSS类名。例如，pure-u-md-*对于具有该设备的设备width >= 768px和pure-u-lg-*具有该设备的设备width >= 1024px。

您的网格系统应该采用什么媒体查询？

网格键
.pure-u-{key}-*		 媒体查询
screen and (min-width: 48em)
 sm screen and (min-width: 35.5em)
 md screen and (min-width: 48em)
 lg screen and (min-width: 64em)
 xl screen and (min-width: 80em)
medscreen and (min-width: 48em)

网格选项

Pure有5个部份和24层的部份 -column默认网格系统。您可以使用小数类名定义元素的宽度，例如; .pure-u-2-5为width: 40%或.pure-u-12-24为width: 50%。您可以查看默认网格中可用的所有网格单元。

您可以自定义列数; 默认网格是24列。您也可以更改Grids类名前缀; 默认是.pure-u-。

列数 网格前缀 

您的Pure启动工具包将在您进行自定义时实时生成。当你准备好了，只需下载它！下载您的入门套件（这是下载的zip文件包含的）

index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Your page title</title>

    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >    <!--[if lte IE 8]>
        <link rel="stylesheet" href="grid-old-ie.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
        <link rel="stylesheet" href="grid.css">
    <!--<![endif]--></head>

<body>
    <!--
    Your HTML goes here. Visit purecss.io/layouts/ for some sample HTML code.
    -->
</body>
</html>

grid.css

                .pure-u-1,
                .pure-u-1-1,
                .pure-u-1-2,
                .pure-u-1-3,
                .pure-u-2-3,
                .pure-u-1-6,
                .pure-u-2-6,
                .pure-u-3-6,
                .pure-u-4-6,
                .pure-u-5-6,
                .pure-u-6-6 {
                    display: inline-block;
                    *display: inline;
                    zoom: 1;
                    letter-spacing: normal;
                    word-spacing: normal;
                    vertical-align: top;
                    text-rendering: auto;
                }
                
                .pure-u-1-6 {
                    width: 16.6667%;
                    *width: 16.6357%;
                }
                
                .pure-u-1-3,
                .pure-u-2-6 {
                    width: 33.3333%;
                    *width: 33.3023%;
                }
                
                .pure-u-1-2,
                .pure-u-3-6 {
                    width: 50%;
                    *width: 49.9690%;
                }
                
                .pure-u-2-3,
                .pure-u-4-6 {
                    width: 66.6667%;
                    *width: 66.6357%;
                }
                
                .pure-u-5-6 {
                    width: 83.3333%;
                    *width: 83.3023%;
                }
                
                .pure-u-1,
                .pure-u-1-1,
                .pure-u-6-6 {
                    width: 100%;
                }
                
                @media screen and (min-width: 35.5em) {
                    .pure-u-sm-1,
                    .pure-u-sm-1-1,
                    .pure-u-sm-1-2,
                    .pure-u-sm-1-3,
                    .pure-u-sm-2-3,
                    .pure-u-sm-1-6,
                    .pure-u-sm-2-6,
                    .pure-u-sm-3-6,
                    .pure-u-sm-4-6,
                    .pure-u-sm-5-6,
                    .pure-u-sm-6-6 {
                        display: inline-block;
                        *display: inline;
                        zoom: 1;
                        letter-spacing: normal;
                        word-spacing: normal;
                        vertical-align: top;
                        text-rendering: auto;
                    }
                
                    .pure-u-sm-1-6 {
                        width: 16.6667%;
                        *width: 16.6357%;
                    }
                
                    .pure-u-sm-1-3,
                    .pure-u-sm-2-6 {
                        width: 33.3333%;
                        *width: 33.3023%;
                    }
                
                    .pure-u-sm-1-2,
                    .pure-u-sm-3-6 {
                        width: 50%;
                        *width: 49.9690%;
                    }
                
                    .pure-u-sm-2-3,
                    .pure-u-sm-4-6 {
                        width: 66.6667%;
                        *width: 66.6357%;
                    }
                
                    .pure-u-sm-5-6 {
                        width: 83.3333%;
                        *width: 83.3023%;
                    }
                
                    .pure-u-sm-1,
                    .pure-u-sm-1-1,
                    .pure-u-sm-6-6 {
                        width: 100%;
                    }
                }
                
                @media screen and (min-width: 48em) {
                    .pure-u-md-1,
                    .pure-u-md-1-1,
                    .pure-u-md-1-2,
                    .pure-u-md-1-3,
                    .pure-u-md-2-3,
                    .pure-u-md-1-6,
                    .pure-u-md-2-6,
                    .pure-u-md-3-6,
                    .pure-u-md-4-6,
                    .pure-u-md-5-6,
                    .pure-u-md-6-6 {
                        display: inline-block;
                        *display: inline;
                        zoom: 1;
                        letter-spacing: normal;
                        word-spacing: normal;
                        vertical-align: top;
                        text-rendering: auto;
                    }
                
                    .pure-u-md-1-6 {
                        width: 16.6667%;
                        *width: 16.6357%;
                    }
                
                    .pure-u-md-1-3,
                    .pure-u-md-2-6 {
                        width: 33.3333%;
                        *width: 33.3023%;
                    }
                
                    .pure-u-md-1-2,
                    .pure-u-md-3-6 {
                        width: 50%;
                        *width: 49.9690%;
                    }
                
                    .pure-u-md-2-3,
                    .pure-u-md-4-6 {
                        width: 66.6667%;
                        *width: 66.6357%;
                    }
                
                    .pure-u-md-5-6 {
                        width: 83.3333%;
                        *width: 83.3023%;
                    }
                
                    .pure-u-md-1,
                    .pure-u-md-1-1,
                    .pure-u-md-6-6 {
                        width: 100%;
                    }
                }
                
                @media screen and (min-width: 64em) {
                    .pure-u-lg-1,
                    .pure-u-lg-1-1,
                    .pure-u-lg-1-2,
                    .pure-u-lg-1-3,
                    .pure-u-lg-2-3,
                    .pure-u-lg-1-6,
                    .pure-u-lg-2-6,
                    .pure-u-lg-3-6,
                    .pure-u-lg-4-6,
                    .pure-u-lg-5-6,
                    .pure-u-lg-6-6 {
                        display: inline-block;
                        *display: inline;
                        zoom: 1;
                        letter-spacing: normal;
                        word-spacing: normal;
                        vertical-align: top;
                        text-rendering: auto;
                    }
                
                    .pure-u-lg-1-6 {
                        width: 16.6667%;
                        *width: 16.6357%;
                    }
                
                    .pure-u-lg-1-3,
                    .pure-u-lg-2-6 {
                        width: 33.3333%;
                        *width: 33.3023%;
                    }
                
                    .pure-u-lg-1-2,
                    .pure-u-lg-3-6 {
                        width: 50%;
                        *width: 49.9690%;
                    }
                
                    .pure-u-lg-2-3,
                    .pure-u-lg-4-6 {
                        width: 66.6667%;
                        *width: 66.6357%;
                    }
                
                    .pure-u-lg-5-6 {
                        width: 83.3333%;
                        *width: 83.3023%;
                    }
                
                    .pure-u-lg-1,
                    .pure-u-lg-1-1,
                    .pure-u-lg-6-6 {
                        width: 100%;
                    }
                }
                
                @media screen and (min-width: 80em) {
                    .pure-u-xl-1,
                    .pure-u-xl-1-1,
                    .pure-u-xl-1-2,
                    .pure-u-xl-1-3,
                    .pure-u-xl-2-3,
                    .pure-u-xl-1-6,
                    .pure-u-xl-2-6,
                    .pure-u-xl-3-6,
                    .pure-u-xl-4-6,
                    .pure-u-xl-5-6,
                    .pure-u-xl-6-6 {
                        display: inline-block;
                        *display: inline;
                        zoom: 1;
                        letter-spacing: normal;
                        word-spacing: normal;
                        vertical-align: top;
                        text-rendering: auto;
                    }
                
                    .pure-u-xl-1-6 {
                        width: 16.6667%;
                        *width: 16.6357%;
                    }
                
                    .pure-u-xl-1-3,
                    .pure-u-xl-2-6 {
                        width: 33.3333%;
                        *width: 33.3023%;
                    }
                
                    .pure-u-xl-1-2,
                    .pure-u-xl-3-6 {
                        width: 50%;
                        *width: 49.9690%;
                    }
                
                    .pure-u-xl-2-3,
                    .pure-u-xl-4-6 {
                        width: 66.6667%;
                        *width: 66.6357%;
                    }
                
                    .pure-u-xl-5-6 {
                        width: 83.3333%;
                        *width: 83.3023%;
                    }
                
                    .pure-u-xl-1,
                    .pure-u-xl-1-1,
                    .pure-u-xl-6-6 {
                        width: 100%;
                    }
                }
                <div class="preloader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

grid-old-ie.css

                .pure-u-1,
                .pure-u-1-1,
                .pure-u-1-2,
                .pure-u-1-3,
                .pure-u-2-3,
                .pure-u-1-6,
                .pure-u-2-6,
                .pure-u-3-6,
                .pure-u-4-6,
                .pure-u-5-6,
                .pure-u-6-6 {
                    display: inline-block;
                    *display: inline;
                    zoom: 1;
                    letter-spacing: normal;
                    word-spacing: normal;
                    vertical-align: top;
                    text-rendering: auto;
                }
                
                .pure-u-1-6 {
                    width: 16.6667%;
                    *width: 16.6357%;
                }
                
                .pure-u-1-3,
                .pure-u-2-6 {
                    width: 33.3333%;
                    *width: 33.3023%;
                }
                
                .pure-u-1-2,
                .pure-u-3-6 {
                    width: 50%;
                    *width: 49.9690%;
                }
                
                .pure-u-2-3,
                .pure-u-4-6 {
                    width: 66.6667%;
                    *width: 66.6357%;
                }
                
                .pure-u-5-6 {
                    width: 83.3333%;
                    *width: 83.3023%;
                }
                
                .pure-u-1,
                .pure-u-1-1,
                .pure-u-6-6 {
                    width: 100%;
                }
                
                .pure-u-sm-1,
                .pure-u-sm-1-1,
                .pure-u-sm-1-2,
                .pure-u-sm-1-3,
                .pure-u-sm-2-3,
                .pure-u-sm-1-6,
                .pure-u-sm-2-6,
                .pure-u-sm-3-6,
                .pure-u-sm-4-6,
                .pure-u-sm-5-6,
                .pure-u-sm-6-6 {
                    display: inline-block;
                    *display: inline;
                    zoom: 1;
                    letter-spacing: normal;
                    word-spacing: normal;
                    vertical-align: top;
                    text-rendering: auto;
                }
                
                .pure-u-sm-1-6 {
                    width: 16.6667%;
                    *width: 16.6357%;
                }
                
                .pure-u-sm-1-3,
                .pure-u-sm-2-6 {
                    width: 33.3333%;
                    *width: 33.3023%;
                }
                
                .pure-u-sm-1-2,
                .pure-u-sm-3-6 {
                    width: 50%;
                    *width: 49.9690%;
                }
                
                .pure-u-sm-2-3,
                .pure-u-sm-4-6 {
                    width: 66.6667%;
                    *width: 66.6357%;
                }
                
                .pure-u-sm-5-6 {
                    width: 83.3333%;
                    *width: 83.3023%;
                }
                
                .pure-u-sm-1,
                .pure-u-sm-1-1,
                .pure-u-sm-6-6 {
                    width: 100%;
                }
                
                .pure-u-md-1,
                .pure-u-md-1-1,
                .pure-u-md-1-2,
                .pure-u-md-1-3,
                .pure-u-md-2-3,
                .pure-u-md-1-6,
                .pure-u-md-2-6,
                .pure-u-md-3-6,
                .pure-u-md-4-6,
                .pure-u-md-5-6,
                .pure-u-md-6-6 {
                    display: inline-block;
                    *display: inline;
                    zoom: 1;
                    letter-spacing: normal;
                    word-spacing: normal;
                    vertical-align: top;
                    text-rendering: auto;
                }
                
                .pure-u-md-1-6 {
                    width: 16.6667%;
                    *width: 16.6357%;
                }
                
                .pure-u-md-1-3,
                .pure-u-md-2-6 {
                    width: 33.3333%;
                    *width: 33.3023%;
                }
                
                .pure-u-md-1-2,
                .pure-u-md-3-6 {
                    width: 50%;
                    *width: 49.9690%;
                }
                
                .pure-u-md-2-3,
                .pure-u-md-4-6 {
                    width: 66.6667%;
                    *width: 66.6357%;
                }
                
                .pure-u-md-5-6 {
                    width: 83.3333%;
                    *width: 83.3023%;
                }
                
                .pure-u-md-1,
                .pure-u-md-1-1,
                .pure-u-md-6-6 {
                    width: 100%;
                }
                
                .pure-u-lg-1,
                .pure-u-lg-1-1,
                .pure-u-lg-1-2,
                .pure-u-lg-1-3,
                .pure-u-lg-2-3,
                .pure-u-lg-1-6,
                .pure-u-lg-2-6,
                .pure-u-lg-3-6,
                .pure-u-lg-4-6,
                .pure-u-lg-5-6,
                .pure-u-lg-6-6 {
                    display: inline-block;
                    *display: inline;
                    zoom: 1;
                    letter-spacing: normal;
                    word-spacing: normal;
                    vertical-align: top;
                    text-rendering: auto;
                }
                
                .pure-u-lg-1-6 {
                    width: 16.6667%;
                    *width: 16.6357%;
                }
                
                .pure-u-lg-1-3,
                .pure-u-lg-2-6 {
                    width: 33.3333%;
                    *width: 33.3023%;
                }
                
                .pure-u-lg-1-2,
                .pure-u-lg-3-6 {
                    width: 50%;
                    *width: 49.9690%;
                }
                
                .pure-u-lg-2-3,
                .pure-u-lg-4-6 {
                    width: 66.6667%;
                    *width: 66.6357%;
                }
                
                .pure-u-lg-5-6 {
                    width: 83.3333%;
                    *width: 83.3023%;
                }
                
                .pure-u-lg-1,
                .pure-u-lg-1-1,
                .pure-u-lg-6-6 {
                    width: 100%;
                }
                <div class="preloader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

下载入门套件后，我们建议您查看Pure布局。他们可以免费下载。使用它们快速启动您的下一个Web项目。快乐编码！


以上内容是否对您有帮助：
← Pure入门
Pure模板 →
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号