xy.css是一個輕量級的CSS構建的模板反應液網格設計。 xy.css中和流氓瀏覽器的風格，帶來橫向和縱向的節奏通過兩個協同網格系統排版和結構。xy.css幫助您創建整潔，設備無關的設計，沒有凌亂的標記與非語義類屬性。專為HTML5，xy.css匯集了最好的CSS技術來自各地的網絡，并將它們集成到一個單一的，功能強大的樣式表模板。
1、可以快速創建響應液態網格設計
設備有各種形狀和大小。屏幕的范圍中的像素寬度從320到2560及以后。液體設計使在網頁上的元素周圍流動相互瀏覽器寬度的變化。看到這樣的一個例子，調整您的瀏覽器一點點，看文字重新排列，以填滿可用空間。其他項目，如圖像，表格和表格也將流入和重新排列。響應式設計使我們可以完全控制網格分辨率。
液體的設計提供了許多好處，但也有限制它的有效性。請注意文字換行，但不調整為瀏覽器的寬度變化。這種無法規模呈現流體設計相對無用為屏幕寬度的增加或減少明顯。
幸運的是，響應式設計使得網頁來檢測媒體和適應為最佳顯示根據客戶特定的特征，例如屏幕寬度，設備類型，方向，等等。這使您可以自定義設計方面，如基于瀏覽器窗口的寬度的布局和字體大小。
xy.css結合了液體和響應設計成流體框架與調和各種規模的畫面。
2、360°有規律的設計
用排版網格設計是已知的，使垂直節奏的網頁。以類似的方式，有橫向布局網格設計帶來的橫向節奏，進一步提升了用戶體驗。xy.css結合了水平布局網格，垂直排版網格來創建一個虛擬的液體基質，帶來360度的節奏和和聲到您的設計。這樣的節奏保持一致的跨屏幕，無論設備的分辨率或屏幕尺寸。
xy.css中和默認瀏覽器的風格和注入整個設計的水平和垂直的節奏。
要查看運行中的雙格矩陣，單擊“網格樣式”按鈕，在右上角，看著框邊和版式保持固定到電網，同時改變瀏覽器的大小。要查看基線布局的液體格，調整瀏覽器來精確984像素（12列）。為了加強布局網格中，單擊顯示網格在屏幕的右上角按鈕。
請注意，所有的布局邊緣如何與電網完全一致。這是什么液體，電網設計是一回事。設計一個特定的寬度，和你的設計保持了基于網格的布局比任何大小的觀看設備。
提示：您的瀏覽器的高度和寬度顯示在屏幕的左上角。
語法是干凈的，語義的HTML5
當與基于網格的設計工作，你需要一種方法來定位您的CSS結構的關鍵要素。這樣做的一個方法包括添加非語義類屬性的標記，像這樣：
<BODY>
<header> </頭>
<Article> </條>
<footer> </頁腳>
</ BODY>使用這種方法，網格類的所有預定義的樣式表，以計算間隔柱尺寸寬度和頁邊距。這可以簡化過程，但你得到的彈性較小，更膨脹，及其他外在屬性弄亂你的HTML5語義。xy.css提供了兩全其美：
一組預定義類EZ斯蒂林的（通過類屬性）
一個簡單的框架，使干凈的，語義標記（通過CSS3和現有的選擇）
使用預定義的類是直接的，而在說明文檔，但是你可以很容易地針對現有的選擇，使用CSS3的力量，樣式幾乎任何東西。的全部潛力的xy.css是實現了清潔，語義標記。前面的例子，而不是如此，我們追求更聰明的標記：
<BODY>
的<Header> </頭>
的<article> </條>
<footer> </頁腳>
</ BODY>通過保持幾個關鍵規則記住，您可以創建基于矩陣的設計任何復雜性，遠遠超出了基本的例子在這里看到。
整個網站是建立在xy網格。點擊頂格按鈕查看矩陣。還檢查了演示。
快速生成響應式布局利器-xy.css產品特點
通過CSS響應式設計@傳媒查詢
CSS重置為中和默認瀏覽器的樣式
水平節奏液網格布局
縮放印刷網格垂直節奏
工作沒有類屬性
專為HTML5，可與任何標記
用CSS3逐步增強
動畫媒體查詢轉換
樣式為移動設備，iPhone / iPad的，與大屏幕
網格樣式的打印介質
單輕量級的CSS文件
開源和免費使用
xy.css|移動網站開發必備工具包括
Eric Meyer的CSS重置
的終極版版本硬派CSS3媒體查詢
xy.css|移動網站開發必備工具入門
下面是如何使用xy.css的快速概覽：
下載xy.css并包含在你的網頁（S）
可選包括視覺矩陣和其他工具
與如描述的xy矩陣排列的HTML元素的文檔
該xy.css樣式表是很好的注釋與圖表和步驟，定義你的風格。如需更完整的指南，請訪問xy.css文檔。您可能還需要檢查出的演示。
xy.css|移動網站開發必備工具瀏覽器支持
xy.css在以下瀏覽器測試：
Chrome 15 thru 23.0.1271.97
Firefox 6 thru 17.0.1
Safari 5 thru 5.1.7 (6534.57.2)
Mobile Safari 5.1 thru 6.0.1 (iPad/iPhone)
Opera 11 thru 12.11
Camino 1.9.2 thru 2.1.2
Internet Explorer 9
IE7 & 8 (grid only)
快速生成響應式布局利器-xy.css官網：http://xycss.com/xy/
演示地址：http://xycss.com/xy/demos/