一聽(tīng)到CSS3，Web設(shè)計(jì)師和開(kāi)發(fā)者們的感覺(jué)就是悲喜兩重天。高興的是，通過(guò)cssS我們可以順利解決很多棘手的問(wèn)題，但可惜的是，它卻不支持IE8瀏覽器。盡管IE8瀏覽器并不支持CSs3,但還是將對(duì)CS3的一部分技術(shù)進(jìn)行展示和描述。無(wú)論如何，這并不影響CS3的普及和使用，因?yàn)檫@樣實(shí)用的模塊設(shè)計(jì)在具有大量市場(chǎng)份額的安卓手機(jī)和iPhone中占有很大的份額。
在此將對(duì)CSS3的一些規(guī)則是如何運(yùn)用的進(jìn)行適當(dāng)?shù)慕忉?從而你可以在自己的網(wǎng)站_上使用CSS3來(lái)創(chuàng)建一個(gè)具有iPhone風(fēng)格的樣式，那么現(xiàn)在我們開(kāi)始吧。接下來(lái)我們會(huì)一起看一 個(gè)很簡(jiǎn) 單的例子，同時(shí)我們也會(huì)對(duì)如何在自己的網(wǎng)站中增加一一個(gè)小屏幕風(fēng)格的視窗進(jìn)行討論，你們會(huì)發(fā)現(xiàn)在移動(dòng)設(shè)備上，現(xiàn)有的網(wǎng)站里增加一-個(gè)樣式表是非常容易的事情。

1. 媒體資訊庫(kù)

如果之前你有過(guò)為網(wǎng)站創(chuàng)建一份打印樣式表的經(jīng)驗(yàn)的話(huà)， 那么你一-定會(huì)對(duì)接下來(lái)的創(chuàng)建特定環(huán)境下運(yùn)行的特殊的樣式表非常熟悉一當(dāng) 頁(yè)面被打印的時(shí)候就會(huì)出現(xiàn)一一個(gè)打印樣式表。這些功能在css2中的媒體類(lèi)型中就可以使用了。媒體類(lèi)型可以讓你能夠指定-種特定的類(lèi)型來(lái)進(jìn)行定義，所以你可以定義為打印、手持或者其他狀態(tài)?？刹磺傻氖?，這些媒體類(lèi)型從來(lái)沒(méi)有得到過(guò)一些設(shè)備的支持，即使是打印媒體類(lèi)型也是這樣，你很少看到它們被運(yùn)用在日常生活中。在CS3中運(yùn)用了媒體資訊庫(kù)這個(gè)概念并把它進(jìn)行延伸。與其尋找設(shè)備的類(lèi)型。還不如注重設(shè)備本身的能力，然后你可以通過(guò)它們來(lái)查詢(xún)各種你想要的東西。例如:

1. 高度和寬度(瀏覽器窗口)。
2. 設(shè)備的高度和寬度。
3. 方向定位--例如識(shí)別這個(gè)手機(jī)現(xiàn)在是橫向屏幕模式還是縱向屏幕模式。
4. 設(shè)備的分辨率

如果用戶(hù)所使用的瀏覽器能夠支持媒體資訊庫(kù)，那么我們就可以在特定的情況下對(duì)CSS3進(jìn)行編寫(xiě)。例如，當(dāng)我們檢測(cè)到用戶(hù)使用的手機(jī)是一個(gè)體積較小的智能手機(jī)，那么我們就可以為用戶(hù)提供一個(gè)較小的網(wǎng)頁(yè)布局。 在實(shí)際操作中我們可以看一看這個(gè)例子，而且這其中就運(yùn)用了媒體資訊庫(kù)的功能，并給網(wǎng)站帶來(lái)了非常大的效應(yīng)。
從上面的例子我們可以看到，在手機(jī)上網(wǎng)站并不僅僅只是減少了體積來(lái)適應(yīng)內(nèi)容，而是對(duì)網(wǎng)站進(jìn)行了重新的構(gòu)架從而來(lái)更好地適應(yīng)小屏幕手機(jī)。此外，可能很多人會(huì)認(rèn)為它是專(zhuān)門(mén)做成類(lèi)似于iPhone布局的樣子，實(shí)際上并不是這樣的。在OperaMinl瀏覽器和基于安卓系統(tǒng)的手機(jī)上它也理進(jìn)行顯示一所以通過(guò) 設(shè)置媒體資訊庫(kù)功能的dConstruct種各樣的設(shè)備-哪 怕是那些你還沒(méi)有想到的設(shè)備，都可以實(shí)現(xiàn)"

2. 利用媒體資訊庫(kù)功能為電話(huà)創(chuàng)建樣式表

在一個(gè)簡(jiǎn)單的兩列布局模式。為了讓它在手機(jī)上能夠更容易閱讀，我決定將布局調(diào)整為單列的線(xiàn)性布局，同時(shí)縮小頁(yè)面頂部的區(qū)域從而使讀者可以略過(guò)前面的內(nèi)容直接閱讀文章。第一種方法是使用媒體資訊庫(kù)，在你的獨(dú)立樣式表內(nèi)部的右側(cè)輸入定義的CsS替換的內(nèi)容。所以在定義小型手機(jī)的時(shí)候我們可以使用下面的編輯語(yǔ)句: @media only screen and (max -device-wiath: 480px) {}然后我們可以在括號(hào)內(nèi)為小型屏幕尺寸的設(shè)備添加css替換內(nèi)容。通過(guò)使用聯(lián)機(jī)編碼我們可以簡(jiǎn)單地用css覆蓋臺(tái)式電腦瀏覽器中的任意樣式規(guī)則。只要這部分內(nèi)容是在CSS中的最后一部分，它就可以覆蓋先前的任意規(guī)則。所以為了達(dá)到頁(yè)面線(xiàn)性布局的效果，我們可以使用一個(gè)較小的頂部圖片，我可以對(duì)它添加以下內(nèi)容：
@media only screen and (max-device-width:480px){
     !div#wrapper {width:400px;}
     !div#header {
! ! background- image; url (media-queries -phone. jpg);
! ! height: 93px; position: relative;
}
! div#header hl { font-size: 140%; }
! #content { float: none; width: 1008; }
. ! #navigation { float :none; width: auto; }
}
在上述的代碼中，我使用了一-個(gè)可替換的背景圖片，同時(shí)減少了頁(yè)面項(xiàng)部的高度,然后再對(duì)內(nèi)容和導(dǎo)航進(jìn)行無(wú)浮標(biāo)設(shè)置，再在早期的樣式表中覆蓋寬度設(shè)置。注意，這些設(shè)置要點(diǎn)只對(duì)小屏幕設(shè)備起作用。

3. 使用媒體資訊庫(kù)鏈接-一個(gè)獨(dú)立 的樣式。

如果你只想做一些細(xì)微的改變， 那么使用媒體資訊庫(kù)來(lái)為設(shè)備增加一個(gè)特殊的內(nèi)嵌代碼是一個(gè)不錯(cuò)的方法。不論如何，如果你的的樣式表包含了很多的覆蓋內(nèi)容或者你想要對(duì)瀏覽器中的樣式進(jìn)行一個(gè)完全的分離，并且你想把它運(yùn)用到小屏幕設(shè)備上，用媒體資訊庫(kù)鏈接不同的樣式表就可以讓你的CSS保持獨(dú)立。要在主樣式表后面添加一個(gè)獨(dú)立的樣式表并且cascade來(lái)覆蓋樣式表中的規(guī)則，你可以使用下面這樣方法。
     <link rel=" stylesheet”type=” text/css” media=”
(max-device-width: 480px)” href=" small-device.css" /,

4. 測(cè)試媒體資訊庫(kù)

如果你是一個(gè)iPhone戶(hù)安卓設(shè)備用戶(hù)或者其他手機(jī)設(shè)備的用戶(hù)，而且你的手機(jī)瀏覽器支持媒體資訊庫(kù)功能，那么你就可以自己測(cè)試你的CSSo但是你還是需要上傳代碼，這樣你才能查看它。那么如果你要對(duì)別人的設(shè)備進(jìn)行本地測(cè)試呢? ProtoFluid這個(gè)優(yōu)秀的網(wǎng)站可以在開(kāi)發(fā)過(guò)程中為你提供幫助。這個(gè)應(yīng)用程序可以給你提供一一個(gè)進(jìn)入你的本地 URL的表格，它可以讓你就像在iPhone、iPad 或者其他各種移動(dòng)設(shè)備的瀏覽器上查看應(yīng)用程序的設(shè)計(jì)一樣。下面的這個(gè)截圖就是通過(guò)Poudol的Phone視圖模式查看的之前的dosrut會(huì)議網(wǎng)站。
如果你有一個(gè)特定的移動(dòng)設(shè)備，你就可以通過(guò)使用你自己的窗口來(lái)對(duì)它進(jìn)行檢測(cè)并了解它屏幕尺寸的大小。
在使用potoFluid的時(shí)候，你要提前對(duì)屏幕顯示的最大寬度和設(shè)備的最大寬中媒體資訊庫(kù)模式進(jìn)行細(xì)微的修改。這意味著，如果用戶(hù)在一個(gè)正常的臺(tái)電腦瀏覽器上仍然可以正常使用媒體資訊庫(kù)，只是這個(gè)窗口很小而已。
@media only screen and (max-width: 480px), only screen and(max- device-width: 480px) {
}
在更新完上述的代碼之后，接下來(lái)只要在瀏覽器里刷新網(wǎng)頁(yè)等窗口重新載入，你就會(huì)發(fā)現(xiàn)新出現(xiàn)的窗口布局已經(jīng)變成了480像素大小了。當(dāng)你在視圖中修改了窗口的寬度數(shù)值后，媒體資訊庫(kù)就能識(shí)別了。那么現(xiàn)在一切就緒，我們可以通過(guò)ProtoFluid來(lái)進(jìn)行測(cè)試了。使用Proto-Fluid最大的一點(diǎn)好處就是，你仍然可以繼續(xù)使用像FireBug 這樣的工具來(lái)對(duì)網(wǎng)頁(yè)設(shè)計(jì)進(jìn)行調(diào)整，而這一點(diǎn)在iPhone上是無(wú)法實(shí)現(xiàn)的。同時(shí)，你還需要在盡可能多的設(shè)備上嘗試你的頁(yè)面布局，同時(shí)用ProtoFluid 的話(huà)將使你的開(kāi)發(fā)和測(cè)試過(guò)程變得更簡(jiǎn)單。需要注意的是，如果當(dāng)人們使用較窄的窗口顯示時(shí)你不想對(duì)你的頁(yè)面布局進(jìn)行調(diào)節(jié)，你可以隨時(shí)刪除媒體資訊庫(kù)中的最大寬度( max-width )這一限制，那么在窗口變小時(shí)將其自動(dòng)切換成小窗口這一功能就只會(huì)在使用小屏幕而不是小窗口瀏覽器的設(shè)備上生效。