pure.css——輕量級、響應式純css模塊，適用於任何Web項目

pure是一個輕量級框架。這類框架的作用就是通過給相應元素添加預設好的class，來快速的實現預設效果。

pure只有短短數千行代碼，但是可控拓展，非常實用，對於新手來說，pure是css框架入門的一個比較好的選擇。在後期做項目時也可能用到類似於boostrap這樣的大型框架。所以前期對於輕量級框架源碼的理解是很有幫助的。

Pure.CSS所佔的空間幾乎可忽略。

Pure 小得不要不要的，壓縮成gzip文件僅為3.7KB*。力求每一行代碼都精簡到極致，以便最大程度壓縮CSS大小，更利於移動Web製作。如果您僅使用其中的一部分模塊，那CSS真是小到沒有朋友了！

開始使用

將 Pure 引入你的頁面，你可以藉助 free unpkg CDN 添加 Pure ，而無需下載到本地。將下面的內容直接複製添加到頁面的

部分即可。

<code><
link
 rel=
"stylesheet"
 href=
"https://unpkg.com/[email protected]/build/pure-min.css"
 integrity=
"sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY"
 crossorigin=
"anonymous"
>/<code>

添加 Viewport Meta 元素

Viewportmeta元素控制移動端瀏覽器的寬度和縮放。為了自適應設備的寬度，請將下面一行加入

中。

<code>
<
meta
 
name
= 
"viewport"
 
content
=
"width=device-width, initial-scale=1"
>
/<code>

響應式柵格，熟悉Pure的柵格（Grids）

Pure的柵格系統非常簡單。你可以使用.pure-g創建行, 使用pure-u-*創建列。

下面是1行3列的柵格：

<code>
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媒體查詢和柵格的class名，我們先來看個普通使用的例子。
首先引入grids-responsive.css:
<code> 
 
<
link
 
rel
=
"stylesheet"
 
href
=
"https://unpkg.com/[email protected]/build/grids-responsive-min.css"
>

  /<code>
下面是grids-responsive.css文件中默認的響應判斷：

 
實現個性化UI
Pure不同於其他框架，她更加開放化、簡單化、扁平化。我們始終認為：編寫新的CSS規則比覆蓋已有的CSS規則更容易。通過增加幾行代碼就能做出屬於你自己的的UI，想想都讓人激動！
另外還有豐富的表單、按鈕、表格、菜單等等擴展組件
此外，還有：
Pure 基於 
Normalize.css
，提供HTML元素佈局、樣式以及最常用的UI組件，幾乎沒有多餘的代碼。
Pure 原生支持響應式, 在所有屏幕尺寸下的顯示效果都是槓槓的！
Pure除了提供基礎樣式外，可擁有極強的擴展性，你可以基於Pure打造出屬於你自己的樣式。沒有做不到，只有想不到。 
想要詳細學的同學可以上官網學習。https://www.purecss.cn/
收藏
舉報
Web前端進階指南 
/<code>