Pure網(wǎng)格

完全可定制和響應(yīng)的CSS網(wǎng)格。

Pure網(wǎng)格介紹

Pure網(wǎng)格易于使用，非常強(qiáng)大。有幾個(gè)簡(jiǎn)單的概念要記?。?/p>

網(wǎng)格類與單元類

Pure網(wǎng)格由兩種類型組成：網(wǎng)格類（pure-g）和單元類（pure-u或pure-u-*）

單位的寬度是分?jǐn)?shù)

單位有各種類別的名稱代表它們的寬度。例如，pure-u-1-2寬度為50％，而pure-u-1-5寬度為20％。

網(wǎng)格的所有子元素必須是單位

包含在具有pure-g類名稱的元素中的子元素必須是帶有pure-u或pure-u-*類名的網(wǎng)格單元。

內(nèi)容進(jìn)入網(wǎng)格單元

人們可以看到的所有內(nèi)容需要包含在網(wǎng)格單元中。這樣可以確保內(nèi)容呈現(xiàn)正確。

font-family在您的項(xiàng)目中 設(shè)置時(shí)，請(qǐng)務(wù)必查看使用您的字體系列使用網(wǎng)格的部分。

我們從一個(gè)簡(jiǎn)單的例子開始吧。這是一個(gè)有三列的網(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>

網(wǎng)格單位尺寸

Pure附帶既有5度和24ths基于網(wǎng)格。下面描述的是可以附加到pure-u-*類名的可用單位，其中*是下面列出的單位分?jǐn)?shù)之一。例如，50％寬度的單位類名為：pure-u-1-2。

定制單位尺寸

我們正在致力于構(gòu)建工具，讓人們可以自定義Pure Grid。第一個(gè)低級(jí)工具 - Pure網(wǎng)格返工插件 -現(xiàn)在可以使用 - 我們使用這個(gè)工具來生成Pure的內(nèi)置單元大小。

Pure反應(yīng)網(wǎng)格

Pure有一個(gè)移動(dòng)優(yōu)先響應(yīng)的網(wǎng)格系統(tǒng)，可以通過CSS類名聲明地使用。它是一個(gè)強(qiáng)大而靈活的網(wǎng)格，建立在默認(rèn)網(wǎng)格之上。

包括在您的頁面上

由于媒體查詢不能被覆蓋，我們不將網(wǎng)格系統(tǒng)作為其一部分pure.css。您必須將其作為單獨(dú)的CSS文件拉入。您可以通過在<link>頁面中添加以下標(biāo)簽來執(zhí)行此操作。

<!--[if lte IE 8]>
    <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
<!--<![endif]-->

即使Pure網(wǎng)格是首創(chuàng)移動(dòng)設(shè)備，您可能希望向在IE 8或更低版本中查看您的網(wǎng)站的用戶展示“桌面體驗(yàn)”。只需將grids-responsive-old-ie.css文件包含在IE條件語句中，Pure Grid將適應(yīng)顯示桌面體驗(yàn)。

Pure正規(guī)網(wǎng)格與響應(yīng)網(wǎng)格

了解Pure的常規(guī)網(wǎng)格和響應(yīng)網(wǎng)格之間的區(qū)別的最佳方式是通過一個(gè)例子。下面的代碼片段顯示了如何編寫常規(guī)的Pure網(wǎng)格。這些網(wǎng)格沒有反應(yīng)。他們將永遠(yuǎn)是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>

接下來，我們來看一個(gè)響應(yīng)式網(wǎng)格。該網(wǎng)格中的元素將width: 100%在小屏幕上，但會(huì)縮小到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>

默認(rèn)媒體查詢

使用響應(yīng)網(wǎng)格時(shí)，您可以通過添加類名來控制網(wǎng)格在特定斷點(diǎn)上的行為。Pure的默認(rèn)響應(yīng)網(wǎng)格帶有以下類名和媒體查詢斷點(diǎn)。

如果要自定義這些媒體查詢斷點(diǎn)，請(qǐng)轉(zhuǎn)到“ 入門”頁面，并生成自己的自定義網(wǎng)格。

使用寬度的相對(duì)單位

您可能已經(jīng)注意到，我們使用em我們的默認(rèn)CSS Media Query寬度而不是px。這是一個(gè)有意識(shí)的決定，因?yàn)樗试S媒體查詢?cè)谌藗兎糯缶W(wǎng)頁時(shí)適當(dāng)?shù)仨憫?yīng)。查看Brad Frost的這篇文章，了解有關(guān)在“媒體查詢”中使用相對(duì)單位的背景信息。

如果您想使用除以外的單位em，您可以隨時(shí)在“ Pure入門”頁面上修改默認(rèn)的“媒體查詢” 。從轉(zhuǎn)換em到px很簡(jiǎn)單：

1em == 16px *

*將em要px轉(zhuǎn)換是基于瀏覽器的默認(rèn)字體大小，這是一般16px的，但可以通過在其瀏覽器中設(shè)置的用戶覆蓋。

Pure反應(yīng)網(wǎng)格的例子

下面的示例利用Pure的響應(yīng)網(wǎng)格創(chuàng)建一列四列。這些列堆疊在小屏幕上，占據(jù)width: 50%中等大小的屏幕和width: 25%大屏幕上。

這是通過添加.pure-u-1小屏幕的類，.pure-u-md-1-2中型屏幕和.pure-u-lg-1-4大屏幕來完成的。調(diào)整頁面大小以查看網(wǎng)格是否響應(yīng)屏幕大小。

移動(dòng)網(wǎng)格

Pure的默認(rèn)網(wǎng)格系統(tǒng)是移動(dòng)優(yōu)先的。如果你想在小屏幕上有一個(gè)網(wǎng)格，只需使用pure-u-*元素上的類名。

響應(yīng)圖像

當(dāng)使用響應(yīng)網(wǎng)格時(shí)，您將希望您的圖像流暢，因此它們會(huì)隨著內(nèi)容的增長而縮小，同時(shí)保持正確的比例。要做到這一點(diǎn)，只需添加上面的.pure-img類。查看下面的例子。

將填充和邊框應(yīng)用于網(wǎng)格單元

要添加邊框和填充到Pure網(wǎng)格，您有兩個(gè)選項(xiàng)。第一個(gè)選項(xiàng)是<div>在每個(gè)網(wǎng)格單元中嵌套一個(gè)子框，并設(shè)置子容器的樣式：

<style>
        .l-box {
            padding: 1em;
        }
    </style>
    
    ...
    
    <div class="pure-g">
    
        <div class="pure-u-1-2">
            <div class="l-box"> ... </div>
        </div>
    
        <div class="pure-u-1-2">
            <div class="l-box"> ... </div>
        </div>
    
    </div>

第二個(gè)選項(xiàng)是將邊框和填充直接添加到網(wǎng)格單元。這通常會(huì)破壞布局風(fēng)險(xiǎn)，但您可以通過以下box-sizing: border-box規(guī)則增強(qiáng)網(wǎng)格本身的行為，輕松避免此問題：

<style>
        .pure-g > div {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .l-box {
            padding: 1em;
        }
    </style>
    
    ...
    
    <div class="pure-g">
    
        <div class="pure-u-1-2 l-box"> ... </div>
        <div class="pure-u-1-2 l-box"> ... </div>
    
    </div>

使用box-sizing: border-box保持您的標(biāo)記更清潔，但有兩個(gè)小的缺點(diǎn)。傳統(tǒng)的瀏覽器如IE 7和下面缺乏支持對(duì)box-sizing，并設(shè)置在所有的網(wǎng)格單元，這一特性使得它很難忽略或取消設(shè)置值稍后。作為一個(gè)無限制的圖書館，Pure讓我們box-sizing保持默認(rèn)值，content-box并為您選擇。

使用網(wǎng)格與您的字體家庭

Pure網(wǎng)格使用特殊的字體堆棧，以確保最大的操作系統(tǒng)/瀏覽器的兼容性，并且默認(rèn)網(wǎng)格單元將有font-family: sans-serif;應(yīng)用-這是默認(rèn)的字體堆棧Pure基礎(chǔ)（Normalize.css）適用于<html>，<button>，<input>，<select>，和<textarea>元素。幸運(yùn)的是，當(dāng)使用Pure時(shí)，確保項(xiàng)目的字體堆棧適用于所有內(nèi)容是非常容易的。而不是font-family僅應(yīng)用于您的<body>元素，應(yīng)用如下：

<style>
    /*
    When setting the primary font stack, apply it to the Pure grid units along
    with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use
    specific font stacks to ensure the greatest OS/browser compatibility.
    */
    html, button, input, select, textarea,
    .pure-g [class *= "pure-u"] {
        /* Set your content font stack here: */
        font-family: Georgia, Times, "Times New Roman", serif;
    }
    </style>

想要使用網(wǎng)格？

網(wǎng)格是Pure CSS文件的一部分。但是，如果您只想要網(wǎng)格而不是其他模塊，則可以單獨(dú)拉下。只是這包括<link>在你的元素<head>。

<!--[if lte IE 8]>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
<![endif]-->
<!--[if gt IE 8]><!-->
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
<!--<![endif]-->

或者，您可以轉(zhuǎn)到“ 入門”頁面，使您自己的網(wǎng)格具有自定義媒體查詢斷點(diǎn)和列大小。完成后下載CSS和HTML文件，快速入門！