中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

cssgrid.net 的秘密

這個站點自稱這個布局為：

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

細心的讀者可能會發(fā)現(xiàn)，這句話其實會有沖突 — 既然是流體布局，那么怎么限定了寬度呢？

拖動瀏覽器的窗口寬度，或者使用 iPhone 等設(shè)備訪問該網(wǎng)站，發(fā)現(xiàn)布局會隨著寬度的縮小發(fā)生改變，從而使頁面的內(nèi)容更容易閱讀。它是如何實現(xiàn)的呢？

給力的 @media

如何給不同的設(shè)備載入不同的樣式，有可能我們首先想到的就是?CSS Hack?？雌涞?CSS 載入方式，我們或許就已經(jīng)能明白個大概。media 這個屬性這個時候就變得非常的給力。

<!-- The 1140px Grid -->
<link rel="stylesheet" href="css/1140.css" type="text/css" media="screen" /> 

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

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

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

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

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

這是個 CSS 按需加載的好辦法。還有個問題就是，可不可以將它們寫到單個文件中，節(jié)省連接數(shù)也方便維護？當(dāng)然可以。例如：

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

我們需要寫到單個文件中，那么內(nèi)容使用

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

包裹起來即可。

寬度的技巧

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

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

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

A：“那么 IE6 怎么辦？” B：“別鬧了?！?/pre>

順便說一句，我們目前廣泛采用的?960 柵格系統(tǒng)是否可以考慮革新下。根據(jù)目前的用戶屏幕分辨率數(shù)據(jù)（via?黑三）來看，桌面屏幕寬度大于等于 1024 像素的分辨率占到了絕大多數(shù)的比例。
我們可以考慮采用例子中 1140 像素或者更大寬度的柵格系統(tǒng) — 這將對于設(shè)計以及內(nèi)容安排方面而言，也將會擁有更大的發(fā)揮空間。
One Size Fits All?
說到這里其實這個布局的大部分技術(shù)原理也了解了大概，其實如果不喜好浮動布局，了解了上述的原理以后，任何布局我們都可以通過重置樣式的方式改進使其支持移動設(shè)備。
學(xué)習(xí) CSS 的過程中總是會不可避免的會碰到布局的問題，同時這也是爭論最多的部分。無論是浮動布局、定位布局、“偽絕對定位布局”、還是“雙飛翼布局”等等，其實都是根據(jù)具體的情況而總結(jié)出來的布局。
所以，我個人的觀點就是，其實沒有任何應(yīng)對各種情況的布局 :^)
那么，您的觀點呢？
-- EOF --
來源：http://www.gracecode.com/archives/3038/
                        

                            
                            收藏已收藏{{ postmeta.bookmark }}
                            點贊已贊{{ postmeta.postlike }}