開始使用

將 Pure 新增至您的網頁

您可以透過免費的 jsDeliver CDN 將 Pure 新增至您的網頁。只需將下列 <link> 元素新增至網頁的 <head>，置於專案樣式表的前面即可。

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

新增視窗 Meta 元素

視窗 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/npm/purecss@3.0.0/build/grids-responsive-min.css">

以下顯示 grids-responsive.css 中包含的預設回應式中斷點

按鍵	CSS 媒體查詢	套用	類別名稱
無	無	始終	`.pure-u-*`
`sm`	`@media 螢幕且(最小寬度: 35.5em)`	≥ 568px	`.pure-u-sm-*`
`md`	`@media 螢幕且(最小寬度: 48em)`	≥ 768px	`.pure-u-md-*`
`lg`	`@media 螢幕且(最小寬度: 64em)`	≥ 1024px	`.pure-u-lg-*`
`xl`	`@media 螢幕且(最小寬度: 80em)`	≥ 1280px	`.pure-u-xl-*`
`xxl`	`@media 螢幕且(最小寬度: 120em)`	≥ 1920px	`.pure-u-xxl-*`
`xxxl`	`@media 螢幕且(最小寬度: 160em)`	≥ 2560px	`.pure-u-xxxl-*`
`x4k`	`@media 螢幕且(最小寬度: 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 開始您的下一個網路專案。

將 Pure 新增至您的網頁

新增視窗 Meta 元素

了解 Pure 網格

回應式網格