快速生成響應(yīng)式布局利器-xy.css|移動網(wǎng)站開發(fā)必備工具

xy.css是一個輕量級的CSS構(gòu)建的模板反應(yīng)液網(wǎng)格設(shè)計。 xy.css中和流氓瀏覽器的風格，帶來橫向和縱向的節(jié)奏通過兩個協(xié)同網(wǎng)格系統(tǒng)排版和結(jié)構(gòu)。xy.css幫助您創(chuàng)建整潔，設(shè)備無關(guān)的設(shè)計，沒有凌亂的標記與非語義類屬性。專為HTML5，xy.css匯集了最好的CSS技術(shù)來自各地的網(wǎng)絡(luò)，并將它們集成到一個單一的，功能強大的樣式表模板。

1、可以快速創(chuàng)建響應(yīng)液態(tài)網(wǎng)格設(shè)計

設(shè)備有各種形狀和大小。屏幕的范圍中的像素寬度從320到2560及以后。液體設(shè)計使在網(wǎng)頁上的元素周圍流動相互瀏覽器寬度的變化?？吹竭@樣的一個例子，調(diào)整您的瀏覽器一點點，看文字重新排列，以填滿可用空間。其他項目，如圖像，表格和表格也將流入和重新排列。響應(yīng)式設(shè)計使我們可以完全控制網(wǎng)格分辨率。

液體的設(shè)計提供了許多好處，但也有限制它的有效性。請注意文字換行，但不調(diào)整為瀏覽器的寬度變化。這種無法規(guī)模呈現(xiàn)流體設(shè)計相對無用為屏幕寬度的增加或減少明顯。

幸運的是，響應(yīng)式設(shè)計使得網(wǎng)頁來檢測媒體和適應(yīng)為最佳顯示根據(jù)客戶特定的特征，例如屏幕寬度，設(shè)備類型，方向，等等。這使您可以自定義設(shè)計方面，如基于瀏覽器窗口的寬度的布局和字體大小。

xy.css結(jié)合了液體和響應(yīng)設(shè)計成流體框架與調(diào)和各種規(guī)模的畫面。

xycss

2、360°有規(guī)律的設(shè)計

用排版網(wǎng)格設(shè)計是已知的，使垂直節(jié)奏的網(wǎng)頁。以類似的方式，有橫向布局網(wǎng)格設(shè)計帶來的橫向節(jié)奏，進一步提升了用戶體驗。xy.css結(jié)合了水平布局網(wǎng)格，垂直排版網(wǎng)格來創(chuàng)建一個虛擬的液體基質(zhì)，帶來360度的節(jié)奏和和聲到您的設(shè)計。這樣的節(jié)奏保持一致的跨屏幕，無論設(shè)備的分辨率或屏幕尺寸。

xy.css中和默認瀏覽器的風格和注入整個設(shè)計的水平和垂直的節(jié)奏。

要查看運行中的雙格矩陣，單擊“網(wǎng)格樣式”按鈕，在右上角，看著框邊和版式保持固定到電網(wǎng)，同時改變?yōu)g覽器的大小。要查看基線布局的液體格，調(diào)整瀏覽器來精確984像素（12列）。為了加強布局網(wǎng)格中，單擊顯示網(wǎng)格在屏幕的右上角按鈕。

請注意，所有的布局邊緣如何與電網(wǎng)完全一致。這是什么液體，電網(wǎng)設(shè)計是一回事。設(shè)計一個特定的寬度，和你的設(shè)計保持了基于網(wǎng)格的布局比任何大小的觀看設(shè)備。

提示：您的瀏覽器的高度和寬度顯示在屏幕的左上角。

語法是干凈的，語義的HTML5

當與基于網(wǎng)格的設(shè)計工作，你需要一種方法來定位您的CSS結(jié)構(gòu)的關(guān)鍵要素。這樣做的一個方法包括添加非語義類屬性的標記，像這樣： 

<BODY>

	<header> </頭>

	<Article> </條>

	<footer> </頁腳>

</ BODY>

使用這種方法，網(wǎng)格類的所有預(yù)定義的樣式表，以計算間隔柱尺寸寬度和頁邊距。這可以簡化過程，但你得到的彈性較小，更膨脹，及其他外在屬性弄亂你的HTML5語義。xy.css提供了兩全其美：

一組預(yù)定義類EZ斯蒂林的（通過類屬性）

一個簡單的框架，使干凈的，語義標記（通過CSS3和現(xiàn)有的選擇）

使用預(yù)定義的類是直接的，而在說明文檔，但是你可以很容易地針對現(xiàn)有的選擇，使用CSS3的力量，樣式幾乎任何東西。的全部潛力的xy.css是實現(xiàn)了清潔，語義標記。前面的例子，而不是如此，我們追求更聰明的標記： 

<BODY>

	的<Header> </頭>

	的<article> </條>

	<footer> </頁腳>

</ BODY>

通過保持幾個關(guān)鍵規(guī)則記住，您可以創(chuàng)建基于矩陣的設(shè)計任何復雜性，遠遠超出了基本的例子在這里看到。

整個網(wǎng)站是建立在xy網(wǎng)格。點擊頂格按鈕查看矩陣。還檢查了演示。

 

快速生成響應(yīng)式布局利器-xy.css產(chǎn)品特點

通過CSS響應(yīng)式設(shè)計@傳媒查詢

CSS重置為中和默認瀏覽器的樣式

水平節(jié)奏液網(wǎng)格布局

縮放印刷網(wǎng)格垂直節(jié)奏

工作沒有類屬性

專為HTML5，可與任何標記

用CSS3逐步增強

動畫媒體查詢轉(zhuǎn)換

樣式為移動設(shè)備，iPhone / iPad的，與大屏幕

網(wǎng)格樣式的打印介質(zhì)

單輕量級的CSS文件

開源和免費使用

xy.css|移動網(wǎng)站開發(fā)必備工具包括

Eric Meyer的CSS重置

的終極版版本硬派CSS3媒體查詢

xy.css|移動網(wǎng)站開發(fā)必備工具入門

下面是如何使用xy.css的快速概覽：

下載xy.css并包含在你的網(wǎng)頁（S）

可選包括視覺矩陣和其他工具

與如描述的xy矩陣排列的HTML元素的文檔

該xy.css樣式表是很好的注釋與圖表和步驟，定義你的風格。如需更完整的指南，請訪問xy.css文檔。您可能還需要檢查出的演示。

xy.css|移動網(wǎng)站開發(fā)必備工具瀏覽器支持

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)

 

快速生成響應(yīng)式布局利器-xy.css官網(wǎng)：http://xycss.com/xy/

演示地址：http://xycss.com/xy/demos/

每天更新，
全站高品質(zhì)素材免費下載！