我們有時候會有這樣的設想，能不能有款佈局既相容桌面瀏覽器，又相容手持設備的小螢幕？cssgrid.net 提供的方案給與我們新的思路。

cssgrid.net 的秘密

這個網站自稱這個佈局為：

A 1140px wide, 12 column grid. Fluid all the way down to a mobile version.

細心的讀者可能會發現，這句話其實會有衝突 — 既然是流體佈局，那麼怎麼限定了寬度呢？

拖動瀏覽器的視窗寬度，或者使用 iPhone 等設備訪問該網站，發現佈局會隨著寬度的縮小發生改變，從而使頁面的內容更容易閱讀。它是如何實現的呢？

給力的 @media

如何給不同的設備載入不同的樣式，有可能我們首先想到的就是 CSS Hack。看其的 CSS 載入方式，我們或許就已經能明白個大概。media 這個屬性這個時候就變得非常的給力。

<!-- The 1140px Grid -->
<link rel="stylesheet" href="HTTP://www.alibuybuy.com/posts/css/1140.css" type="text/css" media="screen" /> 

<!--[if lte IE 9]>
    <link rel="stylesheet" href="HTTP://www.alibuybuy.com/posts/css/ie.css" type="text/css" media="screen" />
<![endif]--> 

<!-- Make minor type adjustments for 1024 monitors -->
<link rel="stylesheet" href="HTTP://www.alibuybuy.com/posts/css/smallerscreen.css" media="only screen and (max-width: 1023px)" /> 

<!-- Resets grid for mobile -->
<link rel="stylesheet" href="HTTP://www.alibuybuy.com/posts/css/mobile.css" media="handheld, only screen and (max-width: 767px)" />

上面的代碼可以看出，1140.css 是佈局的主體。然後，其針對 IE 單獨提供了 ie.css，瀏覽器寬度（或者可以理解為螢幕寬度）為 1024 圖元以下、768 圖元以上使用 smallerscreen.css；小於 768 圖元寬度的則使用 mobile.css。

根據上面定義的典型寬度不難看出，其實 smallerscreen.css 針對的是 iPad 等平板設備，而 mobile.css 針對的是 iPhone 以及 Android 等手機設備。

這是個 CSS 按需載入的好辦法。還有個問題就是，可不可以將它們寫到單個檔中，節省連接數也方便維護？當然可以。例如：

<!-- Resets grid for mobile -->
<link rel="stylesheet" href="HTTP://www.alibuybuy.com/posts/css/mobile.css" media="handheld, only screen and (max-width: 767px)" />

我們需要寫到單個檔中，那麼內容使用

@media handheld, only screen and (max-width: 767px) {
 /* ... */
}

包裹起來即可。

寬度的技巧

似乎有些偏題，回到正題我們繼續分析 cssgrid.net 的佈局。繼續查看 1140.css，其實可以得知就是個浮動佈局。有點不同的是 .row 的樣式：

.row {
 width: 100%;
    max-width: 1140px;
}

這種寫法當時讓我眼前一亮。一般常見的寫法是直接使用width:1140px。這樣寫法的好多多。例如，使用相對寬度、柵格的寬度也對應的使用百分比，那麼總體的柵格該起來將會方便很多。

A：「那麼 IE6 怎麼辦？」 B：「別鬧了。」

順便說一句，我們目前廣泛採用的 960 柵格系統是否可以考慮革新下。根據目前的使用者螢幕解析度資料（via 黑三）來看，桌面螢幕寬度大於等於 1024 圖元的解析度占到了絕大多數的比例。

我們可以考慮採用例子中 1140 圖元或者更大寬度的柵格系統 — 這將對於設計以及內容安排方面而言，也將會擁有更大的發揮空間。</p>

One Size Fits All?

說到這裡其實這個佈局的大部分技術原理也瞭解了大概，其實如果不喜好浮動佈局，瞭解了上述的原理以後，任何佈局我們都可以通過重置樣式的方式改進使其支援行動裝置。

學習 CSS 的過程中總是會不可避免的會碰到佈局的問題，同時這也是爭論最多的部分。無論是浮動佈局、定位佈局、「偽絕對位置佈局」、還是「雙飛翼佈局」等等，其實都是根據具體的情況而總結出來的佈局。

所以，我個人的觀點就是，其實沒有任何應對各種情況的佈局 :^)

那麼，您的觀點呢？

-- EOF --

來源：HTTP://www.gracecode.com/archives/3038/

特別注意：本站所有轉載文章言論不代表本站觀點，本站所提供的攝影照片，插畫，設計作品，如需使用，請與原作者聯繫，文章轉自alibuybuy