免費AI編程助手
Pure開始使用
2018-09-21 18:18 更新
用Pure開始下一個Web項目。
將Pure添加到您的頁面
您可以通過免費的unpkg CDN將Pure添加到您的頁面。在項目的樣式表之前，只需將以下<link>元素添加到頁面中即可<head>。
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">添加視口元素元素
視口meta元素允許您在移動瀏覽器上控制視口的寬度和比例。由于您正在構(gòu)建響應(yīng)式網(wǎng)站，您希望寬度與設(shè)備的本機寬度相等。將其添加到您的頁面<head>。
<meta name="viewport" content="width=device-width, initial-scale=1">了解Pure網(wǎng)格
Pure網(wǎng)格系統(tǒng)非常簡單。您可以通過使用.pure-g類創(chuàng)建一行，并通過使用類在該行中創(chuàng)建列pure-u-*。
這是一個有三列的網(wǎng)格：
<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>| 三分之二 | 三分之二 | 三分之二 |
響應(yīng)網(wǎng)格
Pure的網(wǎng)格系統(tǒng)也是移動優(yōu)先和響應(yīng)靈活的，您可以通過指定CSS Media Query斷點和網(wǎng)格類名來自定義網(wǎng)格。如果需要，您可以在下面定制Pure網(wǎng)格，但是讓我們開始一個例子。
您還需要將Pure包含grids-responsive.css在您的頁面上：
<!--[if lte IE 8]>
<link rel="stylesheet" rel="external nofollow" target="_blank" >
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" rel="external nofollow" target="_blank" >
<!--<![endif]-->以下是默認(rèn)的響應(yīng)斷點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-* |
以下是您可以做的事情的例子。嘗試調(diào)整屏幕大小以查看網(wǎng)格如何響應(yīng)。
| .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 |
||
了解更多關(guān)于如何包含和使用Pure的響應(yīng)網(wǎng)格系統(tǒng)，以及它如何與基本網(wǎng)格進(jìn)行比較。
構(gòu)建您的Pure啟動工具包
既然你知道網(wǎng)格如何工作，你可能需要自定義事情來更好地適應(yīng)你的Web項目。您可以通過指定CSS Media Queries來定義自己的斷點。您還可以自定義布局所需的列數(shù)。
我們將生成一個index.html文件，如果需要，grid.css可以下載并用作項目起點的文件。
網(wǎng)格媒體查詢
您可以使用Pure的默認(rèn)CSS媒體查詢，這將添加grids-responsive.css到您的Pure Starter Kit中，或者如果您為我們提供斷點，我們可以生成移動優(yōu)先的響應(yīng)式網(wǎng)格。
Pure產(chǎn)生的響應(yīng)網(wǎng)格使用簡單。它為每個媒體查詢提供了一個特定的CSS類名。例如，pure-u-md-*對于具有該設(shè)備的設(shè)備width >= 768px和pure-u-lg-*具有該設(shè)備的設(shè)備width >= 1024px。
您的網(wǎng)格系統(tǒng)應(yīng)該采用什么媒體查詢？
| 網(wǎng)格鍵 .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) |
| med | screen and (min-width: 48em) |
網(wǎng)格選項
Pure有5個部份和24層的部份 -column默認(rèn)網(wǎng)格系統(tǒng)。您可以使用小數(shù)類名定義元素的寬度，例如; .pure-u-2-5為width: 40%或.pure-u-12-24為width: 50%。您可以查看默認(rèn)網(wǎng)格中可用的所有網(wǎng)格單元。
您可以自定義列數(shù); 默認(rèn)網(wǎng)格是24列。您也可以更改Grids類名前綴; 默認(rèn)是.pure-u-。
列數(shù) 網(wǎng)格前綴
您的Pure啟動工具包將在您進(jìn)行自定義時實時生成。當(dāng)你準(zhǔn)備好了，只需下載它！下載您的入門套件（這是下載的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" 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項目?？鞓肪幋a！
以上內(nèi)容是否對您有幫助：
← Pure入門
更多建議：