Pure網格

2018-09-13 11:54 更新

完全可定制和響應的CSS網格。

Pure網格介紹

Pure網格易于使用，非常強大。有幾個簡單的概念要記?。?/p>

網格類與單元類
Pure網格由兩種類型組成：網格類（pure-g）和單元類（pure-u或pure-u-*）
單位的寬度是分數(shù)
單位有各種類別的名稱代表它們的寬度。例如，pure-u-1-2寬度為50％，而pure-u-1-5寬度為20％。
網格的所有子元素必須是單位
包含在具有pure-g類名稱的元素中的子元素必須是帶有pure-u或pure-u-*類名的網格單元。
內容進入網格單元
人們可以看到的所有內容需要包含在網格單元中。這樣可以確保內容呈現(xiàn)正確。
font-family在您的項目中 設置時，請務必查看使用您的字體系列使用網格的部分。

我們從一個簡單的例子開始吧。這是一個有三列的網格：

<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附帶既有5度和24ths基于網格。下面描述的是可以附加到pure-u-*類名的可用單位，其中*是下面列出的單位分數(shù)之一。例如，50％寬度的單位類名為：pure-u-1-2。

Pure網格

Pure網格

Pure網格

定制單位尺寸

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

Pure反應網格

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

包括在您的頁面上

由于媒體查詢不能被覆蓋，我們不將網格系統(tǒng)作為其一部分pure.css。您必須將其作為單獨的CSS文件拉入。您可以通過在<link>頁面中添加以下標簽來執(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網格是首創(chuàng)移動設備，您可能希望向在IE 8或更低版本中查看您的網站的用戶展示“桌面體驗”。只需將grids-responsive-old-ie.css文件包含在IE條件語句中，Pure Grid將適應顯示桌面體驗。

Pure正規(guī)網格與響應網格

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

接下來，我們來看一個響應式網格。該網格中的元素將width: 100%在小屏幕上，但會縮小到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>

默認媒體查詢

使用響應網格時，您可以通過添加類名來控制網格在特定斷點上的行為。Pure的默認響應網格帶有以下類名和媒體查詢斷點。

Pure網格

如果要自定義這些媒體查詢斷點，請轉到“ 入門”頁面，并生成自己的自定義網格。

使用寬度的相對單位

您可能已經注意到，我們使用em我們的默認CSS Media Query寬度而不是px。這是一個有意識的決定，因為它允許媒體查詢在人們放大網頁時適當?shù)仨憫?。查?a rel="external nofollow" target="_blank" target="_blank">Brad Frost的這篇文章，了解有關在“媒體查詢”中使用相對單位的背景信息。

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

1em == 16px *

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

Pure反應網格的例子

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

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

Pure網格

Pure網格

Pure網格

移動網格

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

Pure網格

響應圖像

當使用響應網格時，您將希望您的圖像流暢，因此它們會隨著內容的增長而縮小，同時保持正確的比例。要做到這一點，只需添加上面的.pure-img類。查看下面的例子。

Pure網格

將填充和邊框應用于網格單元

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

<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>

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

<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保持您的標記更清潔，但有兩個小的缺點。傳統(tǒng)的瀏覽器如IE 7和下面缺乏支持對box-sizing，并設置在所有的網格單元，這一特性使得它很難忽略或取消設置值稍后。作為一個無限制的圖書館，Pure讓我們box-sizing保持默認值，content-box并為您選擇。

使用網格與您的字體家庭

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

<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>

想要使用網格？

網格是Pure CSS文件的一部分。但是，如果您只想要網格而不是其他模塊，則可以單獨拉下。只是這包括<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]-->

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


以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號