使用CSS3媒體資訊庫創(chuàng)建移動網(wǎng)站
日期 : 2021-12-20 21:10:17
一聽到CSS3,Web設(shè)計師和開發(fā)者們的感覺就是悲喜兩重天。高興的是,通過cssS我們可以順利解決很多棘手的問題,但可惜的是,它卻不支持IE8瀏覽器。盡管IE8瀏覽器并不支持CSs3,但還是將對CS3的一部分技術(shù)進(jìn)行展示和描述。無論如何,這并不影響CS3的普及和使用,因為這樣實用的模塊設(shè)計在具有大量市場份額的安卓手機(jī)和iPhone中占有很大的份額。
在此將對CSS3的一些規(guī)則是如何運(yùn)用的進(jìn)行適當(dāng)?shù)慕忉?從而你可以在自己的網(wǎng)站_上使用CSS3來創(chuàng)建一個具有iPhone風(fēng)格的樣式,那么現(xiàn)在我們開始吧。接下來我們會一起看一 個很簡 單的例子,同時我們也會對如何在自己的網(wǎng)站中增加一一個小屏幕風(fēng)格的視窗進(jìn)行討論,你們會發(fā)現(xiàn)在移動設(shè)備上,現(xiàn)有的網(wǎng)站里增加一-個樣式表是非常容易的事情。
- 媒體資訊庫
- 高度和寬度(瀏覽器窗口)。
- 設(shè)備的高度和寬度。
- 方向定位--例如識別這個手機(jī)現(xiàn)在是橫向屏幕模式還是縱向屏幕模式。
- 設(shè)備的分辨率
從上面的例子我們可以看到,在手機(jī)上網(wǎng)站并不僅僅只是減少了體積來適應(yīng)內(nèi)容,而是對網(wǎng)站進(jìn)行了重新的構(gòu)架從而來更好地適應(yīng)小屏幕手機(jī)。此外,可能很多人會認(rèn)為它是專門做成類似于iPhone布局的樣子,實際上并不是這樣的。在OperaMinl瀏覽器和基于安卓系統(tǒng)的手機(jī)上它也理進(jìn)行顯示一所以通過 設(shè)置媒體資訊庫功能的dConstruct種各樣的設(shè)備-哪 怕是那些你還沒有想到的設(shè)備,都可以實現(xiàn)"
- 利用媒體資訊庫功能為電話創(chuàng)建樣式表
@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; }
}
在上述的代碼中,我使用了一-個可替換的背景圖片,同時減少了頁面項部的高度,然后再對內(nèi)容和導(dǎo)航進(jìn)行無浮標(biāo)設(shè)置,再在早期的樣式表中覆蓋寬度設(shè)置。注意,這些設(shè)置要點(diǎn)只對小屏幕設(shè)備起作用。
- 使用媒體資訊庫鏈接-一個獨(dú)立 的樣式。
<link rel=" stylesheet”type=” text/css” media=”
(max-device-width: 480px)” href=" small-device.css" /,
- 測試媒體資訊庫
如果你有一個特定的移動設(shè)備,你就可以通過使用你自己的窗口來對它進(jìn)行檢測并了解它屏幕尺寸的大小。
在使用potoFluid的時候,你要提前對屏幕顯示的最大寬度和設(shè)備的最大寬中媒體資訊庫模式進(jìn)行細(xì)微的修改。這意味著,如果用戶在一個正常的臺電腦瀏覽器上仍然可以正常使用媒體資訊庫,只是這個窗口很小而已。
@media only screen and (max-width: 480px), only screen and(max- device-width: 480px) {
}
在更新完上述的代碼之后,接下來只要在瀏覽器里刷新網(wǎng)頁等窗口重新載入,你就會發(fā)現(xiàn)新出現(xiàn)的窗口布局已經(jīng)變成了480像素大小了。當(dāng)你在視圖中修改了窗口的寬度數(shù)值后,媒體資訊庫就能識別了。那么現(xiàn)在一切就緒,我們可以通過ProtoFluid來進(jìn)行測試了。使用Proto-Fluid最大的一點(diǎn)好處就是,你仍然可以繼續(xù)使用像FireBug 這樣的工具來對網(wǎng)頁設(shè)計進(jìn)行調(diào)整,而這一點(diǎn)在iPhone上是無法實現(xiàn)的。同時,你還需要在盡可能多的設(shè)備上嘗試你的頁面布局,同時用ProtoFluid 的話將使你的開發(fā)和測試過程變得更簡單。需要注意的是,如果當(dāng)人們使用較窄的窗口顯示時你不想對你的頁面布局進(jìn)行調(diào)節(jié),你可以隨時刪除媒體資訊庫中的最大寬度( max-width )這一限制,那么在窗口變小時將其自動切換成小窗口這一功能就只會在使用小屏幕而不是小窗口瀏覽器的設(shè)備上生效。