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

1. 媒體資訊庫

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

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

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

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

在一個簡單的兩列布局模式。為了讓它在手機上能夠更容易閱讀，我決定將布局調整為單列的線性布局，同時縮小頁面頂部的區(qū)域從而使讀者可以略過前面的內容直接閱讀文章。第一種方法是使用媒體資訊庫，在你的獨立樣式表內部的右側輸入定義的CsS替換的內容。所以在定義小型手機的時候我們可以使用下面的編輯語句: @media only screen and (max -device-wiath: 480px) {}然后我們可以在括號內為小型屏幕尺寸的設備添加css替換內容。通過使用聯(lián)機編碼我們可以簡單地用css覆蓋臺式電腦瀏覽器中的任意樣式規(guī)則。只要這部分內容是在CSS中的最后一部分，它就可以覆蓋先前的任意規(guī)則。所以為了達到頁面線性布局的效果，我們可以使用一個較小的頂部圖片，我可以對它添加以下內容：
@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; }
}
在上述的代碼中，我使用了一-個可替換的背景圖片，同時減少了頁面項部的高度,然后再對內容和導航進行無浮標設置，再在早期的樣式表中覆蓋寬度設置。注意，這些設置要點只對小屏幕設備起作用。

3. 使用媒體資訊庫鏈接-一個獨立 的樣式。

如果你只想做一些細微的改變， 那么使用媒體資訊庫來為設備增加一個特殊的內嵌代碼是一個不錯的方法。不論如何，如果你的的樣式表包含了很多的覆蓋內容或者你想要對瀏覽器中的樣式進行一個完全的分離，并且你想把它運用到小屏幕設備上，用媒體資訊庫鏈接不同的樣式表就可以讓你的CSS保持獨立。要在主樣式表后面添加一個獨立的樣式表并且cascade來覆蓋樣式表中的規(guī)則，你可以使用下面這樣方法。

4. 測試媒體資訊庫

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

文章標題：使用CSS3媒體資訊庫創(chuàng)建移動網站
網頁路徑：http://jinyejixie.com/news/134070.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供做網站、網站維護、手機網站建設、網站營銷、服務器托管、網站設計

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)