上一篇我們談到了移動(dòng)網(wǎng)站中的標(biāo)簽，想必很多人也很想了解Mobile CSS的情況吧，本文將和大家一起探討移動(dòng)網(wǎng)站中的CSS標(biāo)準(zhǔn)。

介紹

Mobile css的標(biāo)準(zhǔn)也是有些復(fù)雜的，與前一篇文章中提到的類似，之前存在著一個(gè)W3C制定的CSS Mobile Profile 1.0以及OMA的WAP CSS 1.0，事實(shí)上它們都是CSS 2.1的子集，而且內(nèi)容非常接近，不同的是，WAP CSS 1.0針對(duì)移動(dòng)設(shè)備加入了一些擴(kuò)展，這些擴(kuò)展通過-wap-前綴來實(shí)現(xiàn)。

后來，W3C將二者進(jìn)行了整合，吸收了WAP CSS1.0的一些優(yōu)點(diǎn)，推出了CSS Mobile Prifile 2.0規(guī)范，它也是CSS 2.1的一個(gè)子集。我們本文將主要討論這個(gè)規(guī)范。

CSS Mobile Profile 2.0中的CSS支持

因?yàn)檫@是CSS 2.1的一個(gè)子集，那么我們對(duì)這個(gè)規(guī)范的內(nèi)容應(yīng)該不會(huì)陌生，我們通過這個(gè)表格可以很直觀的看到CSS MP對(duì)CSS的支持情況：

注1：border-style只支持常用的none、dotted、dashed、solid和inherit，其它的幾個(gè)并沒有被列入規(guī)范。

注2：display僅限于inline、block、list-item、none和inherit，不支持run-in和inline-block

注3：overflow只支持auto

注4：overflow-sytle只支持marquee值

注5：font-size只支持大小關(guān)鍵詞，比如small、medium、bigger等，px、pt和百分比等不被支持。

注6：text-decoration只支持none、blink、underline和inherit等，overline、line-trough不被支持。

注7：vertical-align 只支持top, middle, bottom, baseline 和inherit。sub, super, text-top, text-bottom, 百分比和長(zhǎng)度不被支持

注8：@media規(guī)則只支持 handheld 和all 媒體類型。

用法與瀏覽器支持

就像之前文章里面提到的那樣，目前絕大多數(shù)的手機(jī)是支持XHTML Basic 1.0和XHTML MP 1.0標(biāo)準(zhǔn)的，這就意味著在某種程度上移動(dòng)網(wǎng)站的HTML/XHTML代碼是可以與桌面版的相兼容甚至完全一致的。甚至有些網(wǎng)站的移動(dòng)版直接使用HTML 4/5或者XHTML 1.0的DTD。這樣移動(dòng)版網(wǎng)站可以直接通過handheld的media type來制定一個(gè)移動(dòng)頁面專用的CSS文件：

<link rel="stylesheet" media="handheld" href="">  

絕大多數(shù)傳統(tǒng)手機(jī)上的瀏覽器都支持handheld媒體類型，包括opera mini和windows mobile中的IE。

其實(shí)考慮到傳統(tǒng)手機(jī)的自身的限制和移動(dòng)網(wǎng)絡(luò)速度的限制，通過media type來加載外部樣式是不可取的，通常用于移動(dòng)版頁面的樣式不多，而多加載一個(gè)外部樣式的代價(jià)是巨大的。所以，大部分的網(wǎng)站的移動(dòng)版采用在head中嵌入樣式表的方式。

如果，你一定要采用外部樣式的話，***不要用@import，因?yàn)橛行┦謾C(jī)瀏覽器并不支持。

特別值得一提的是，mobile webkit(包括iphone safari和android chrome lite等)不支持handheld。

而在視覺上的差異，主要是字體的表現(xiàn)差異，這和各個(gè)手機(jī)瀏覽器有關(guān)，想要做的像素***，不是件容易的事情。

總結(jié)

雖然，移動(dòng)網(wǎng)站貌似不用考慮太多的功能，布局簡(jiǎn)單，功能簡(jiǎn)單，但是現(xiàn)實(shí)并沒有想象中的那么簡(jiǎn)單。移動(dòng)網(wǎng)站面臨的***的問題是瀏覽器眾多，手機(jī)終端差別又很大，開發(fā)的時(shí)候，會(huì)遇到這種細(xì)節(jié)問題。

目前國內(nèi)移動(dòng)網(wǎng)站的前端開發(fā)，還處于起步階段，隨著iPhone和Android等智能手機(jī)的流行，針對(duì)高端智能手機(jī)設(shè)備的網(wǎng)站開發(fā)將逐漸盛行，如 @SMbey0nd 所言，Mobile Web風(fēng)暴，即將席卷中國，對(duì)于這個(gè)相對(duì)較新的領(lǐng)域，我們還有很多事情要做。

其實(shí)本文僅僅涉及到Mobile CSS的一些非?；A(chǔ)的方面，希望可以拋磚引玉，引起更多的人研究和分享移動(dòng)網(wǎng)站開發(fā)的前端技術(shù)和技巧，如果你有較深入的研究，歡迎通過前端觀察與大家分享。