Pure CSS模塊
無論是微信小程序還是傳統網站項目開發，所需基本技能知識包括HTML、CSS、JavaScript及服務器端編程語言Java、Php等。大體劃分的話，一個網站主要由前端、後臺業務、數據庫等三部分所組成。前端用於實現人機交互、後臺業務用於實現業務規則編程及實現、數據庫用於業務支撐相關數據的管理與存儲。由此可見前端的重要性，企業級項目開發中往往使用第三方提供的各類前端框架模型，以達到設計效果統一、開發效率高的目標。本文主要介紹輕量級前端架構Pure的基本應用之頁面佈局。
Pure.css基本概述
Pure.css是目前主流移動優先、響應式前端架構佈局的框架之一，該框架由雅虎公司於2013年開發推出。Pure.css採用可擴展於模塊化體系結構，使其能夠快速應用於新的Web項目開發。Pure.css易於定製，並支持Bootstrop組件的擴展，極大提高了前端開發的效率。
雅虎 Pure.css
Pure.css主要提供了常用網頁佈局與網頁元素的設計，主要組成部分包括Grids網格系統、Forms表單元素、Buttons按鈕元素、Tables表格元素等。本文主要介紹頁面佈局之Girds網格系統。
Girds網格系統
網格顧名思義主要用於實現網頁頁面的佈局，將頁面劃分為二維網格，通過網格實現頁面結構的劃分。Pure網格系統支持默認每行最高24列單元格。網格系統由兩種類型的類組成：網格類（pure-g）和單位類（pure-u或pure-u-*）。示例如下：
三單元網格劃分
基本網格使用如上所示，正如之前文章介紹說明Pure是基於移動優先的響應式架構設計模式，因此網格系統能夠針對不同用戶終端設備尺寸進行響應。使用響應式網格時，可以通過添加類名稱來控制網格在特定斷點處的行為。媒體查詢端點及對應網格類名如下：
媒體查詢端點與網格類對應關係
響應式頁面佈局實例
在明確Girds網格基本知識之後，我們可以通過實例對響應式網頁佈局進行簡單分析與說明。我們需要設計一個響應式頁面佈局結構，當改變窗口寬度時，頁面佈局中兩列的需要單獨成列。設計頁面結構如下：
頁面佈局設置
頁面佈局設置要求如上圖，頁面劃分為四個部分，分別為header頭部、footer頁腳部分、left左側、right右側四個部分，為方便區分我們設置了不同顏色進行顯示。當窗口寬度小於568px時中間兩列都轉成單獨列。實現要求效果描述如下：
小尺寸設備中顯示效果
小尺寸設備中顯示效果如上圖所示，本例響應式是在端點（568px），小於568px時顯示小尺寸設備樣式，大於568px時顯示左右兩側樣式效果。實現基本代碼描述如下：
1、引入樣式文件
使用Pure框架僅需要通過link引入CSS樣式文件即可。同時響應式頁面需要設置視口，主要代碼如下：
引入框架
2、自定義頁面佈局style
頁面劃分為四個部分，主要通過div層實現，為演示效果設置了不同背景樣式，同時針對lg、sm及小於568px進行了對應樣式設置。實現代碼如下：
頁面佈局樣式
3、頁面標記編寫
頁面標記主要使用div進行佈局，頁面標記編寫代碼描述如下圖所示：
頁面佈局代碼
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯繫作者，共同探討。期待大家關注！相關文章鏈接如下：
閱讀更多 kid編程 的文章
