針對移動設備的CSS3佈局

針對移動設備的CSS3佈局

一些專業人士預測五年內移動設備將擊敗普通電腦成爲網頁瀏覽領域的霸主，無論這個預言是否應驗，讓網頁在移動設備上較好的顯示已經成爲網頁設計師和開發者的重要任務，本教程學習用CSS3的一些技術來讓網頁佈局適應移動設備。

 

---

一、思考

在編寫適應移動設備的佈局前有幾個問題值得思考。

移動互聯網瀏覽

1. 限制HTTP請求:3G信號傳輸費用昂貴，可能的話也要限制圖像顯示。
2. 不一樣的屏幕尺寸: 移動設備屏幕尺寸寬度通常來講從320到480不等，可是也會由於設備的不一樣有很大差別，因此在CSS裏面預先設定寬度並不是明智之舉。
3. 優化某一類別: 市面上有不少種移動設備以及操做系統、瀏覽器等，因此優先測試你的訪問者用得比較多的設備，如今智能手機通常是iPhone、iPad、黑莓、谷歌Android、塞班Symbian、window等，要根據區域內狀況有重點地選擇測試。
4. 禁用懸停（Hover）: 觸摸屏並不能很好地支持hover，因此作菜單時，最好不要使用下拉菜單等形式，hover在移動設備上通常來講只能用於增長視覺的效果（好比更改顏色）。

瀏覽器支持（桌面平臺）

其次，記住要跨瀏覽器支持，諺語有云「房間裏的大象（譯者注：英文諺語，指顯而易見而又被忽略的事實）指的就是IE。幸運的是，如今發現，只要不會 影響到內容，網站在不一樣瀏覽器的顯示不必定要徹底相同。一般來講一個沒法支持CSS3的瀏覽器也能提供尚可接受的瀏覽體驗。總而言之，要提早知道網頁在各 種瀏覽器上的顯示效果。

二、HTML

Body部分

不只應該知道如何編寫合法的html，並且要儘量地簡潔。保持html的流暢、去掉沒必要要的Div一直都是不錯的習慣，在移動設備瀏覽上，這點顯得更爲重要。並且，以往一些須要7個嵌套Div標記的效果，如今經過CSS3的少許代碼就能實現。

儘管這不是html5教程，可是我依然堅持Xhtm的嚴格語法。如下是一個典型佈局的html，這是一個包含頭部、底部、側邊欄、主內容的頁面。你能夠看到，這個頁面至關簡單明瞭，若是採用html5的元素，可以更加的簡潔。

幫助

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

< body >    < div class = 'pg' >      < div class = 'head' >        < h1 >< a href = '#' >My Blog</ a ></ h1 >      </ div >        < div class = 'pg-main' >          < div class = 'entries' >          < h2 >< a href = '#' >An Entry About Something</ a ></ h2 >          < p class = 'preview' >段落文字一前言</ p >          < p >段落文字一</ p >          < hr />            < h2 >< a href = '#' >An Entry About Something Else</ a ></ h2 >          < p class = 'preview' >段落文字二前言</ p >          < p >段落文字二</ p >          < hr />            < h2 >< a href = '#' >A Third Entry</ a ></ h2 >          < p class = 'preview' >段落文字三前言</ p >          < p >段落文字三</ p >        </ div >          < div class = 'sidebar' >          < h2 class = 'not-there' >Blog Menu</ h2 >          < h3 class = 'subscribe' >Subscribe</ h3 >          < ul class = 'subscribe' >            < li >< a href = '#' >RSS</ a ></ li >          </ ul >          < h3 >Social</ h3 >          < ul >            < li >< a href = '#' >Facebook</ a ></ li >            < li >< a href = '#' >Twitter</ a ></ li >          </ ul >          < h3 >Categories</ h3 >          < ul >            < li >< a href = '#' >Something</ a ></ li >            < li >< a href = '#' >Nothing</ a ></ li >            < li >< a href = '#' >All Things</ a ></ li >            < li >< a href = '#' >No Things</ a ></ li >          </ ul >          < h3 >Archives</ h3 >          < ul >            < li >< a href = '#' >June 2010</ a ></ li >            < li >< a href = '#' >May 2010</ a ></ li >            < li >< a href = '#' >April 2010</ a ></ li >            < li >< a href = '#' >March 2010</ a ></ li >          </ ul >        </ div >      </ div >        < div class = 'foot' >        < p >© No one in particular 2010</ p >      </ div >      </ div > </ body >;

Meta標記：Viewport

在head部分，通常會放置例如CSS樣式表、語言、標題等等，可是爲了平滑移動設備瀏覽器效果，還須要而外增長一個Viewport，參考代碼以下：

幫助

1	< meta name = "viewport" content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

這是蘋果公司建議的，用於幫助iPhone渲染頁面，這個標記會自動匹配頁面和瀏覽器窗口並防止縮放，一些其餘的移動瀏覽器也支持，如黑莓。測試發現，這個標記並不會影響到桌面平臺瀏覽器的效果，因此建議放置在head裏面。

思考佈局

這個教程會將以上的html分紅兩個佈局，一個佈局用來適應移動平臺，一個用來適應桌面平臺。在實踐中，一般要根據目標的不一樣，分開弄幾個佈局，這裏爲了簡化教程，只分爲兩個。

三、針對移動平臺

本教程的目的不在於富文本技術或者頁面設計，因此，呈現的效果會比較簡陋，不過這並不重要，重要的是駕馭樣式表的思路。一切的要點在於優先考慮移動平臺的佈局，由於一個在移動平臺上顯示正常的佈局極可能也能適應桌面平臺。因此要先從移動平臺的佈局弄起，這可以確保在移動平臺統治的趨勢下，你的網站不會丟失聽衆。

CSS參考

先思考一下，要避免出現很長的滾動條，因此修改一下博客的菜單，讓用戶體驗更好。

幫助

1 2 3 4 5 6 7 8 9

.sidebar ul{    border-left : solid 1px #ccc ;    padding : 0 0 0 5px ; } .sidebar ul li{    display : inline ;    padding : 0 5px 0 0px ;    border-right : solid 1px #ccc ; }

這樣菜單就變成橫排的，每一個目錄中間有一條分割線，乾淨整潔。在移動設備上，保持菜單在屏幕底部是很是有用的，假如瀏覽完一篇文章，菜單不在底部的話，還要再滾動回菜單的地方，這樣就很不方便，在一些設備上，滾動窗口可能會相對麻煩得多。固然這個方式有利有弊。

其次將RSS訂閱移動到頂部區域。

幫助

01 02 03 04 05 06 07 08 09 10 11 12 13

h 3 .subscribe{    display : none ; } .sidebar ul.subscribe{    position : absolute ;    top : 25px ;    right : 10px ;    border : none ;    color : #fff ; } .sidebar ul.subscribe li{    border : none ; }

除此以外，就是調整一些字體的大小，超連接的顏色等，此教程還包含一個CSS Reset，完整的CSS能夠在源碼上找到。所以，其實若是站在移動設備優先的角度上思考的話，佈局的時候也沒什麼特別之處。

四、針對桌面平臺

介紹：媒介查詢Media Query

經過CSS3的媒介查詢，跨設備的問題可以較好地解決。媒介查詢能夠根據若干個條件（好比屏幕尺寸），使頁面對移動設備進行匹配，

先看一下下面的代碼：

幫助

1 2 3 4

.pg{</span> < pre >  width : 800px ;    margin : 0 auto ; }

在這個例子中，寬度是800px，可是這樣必須確保全部用戶的瀏覽器窗口寬度都是至少800px，不然就會出現水平滾動條。因此將這條代碼放置在媒介查詢裏面，代碼以下：

 

幫助

1 2 3 4 5 6

@media all and ( min-width : 800px ){</span> < pre >  .pg{      width : 800px ;      margin : 0 auto ;    } }

這樣事情變得很簡單，代碼中「all」意味着這個style可用於全部的媒介，還有其餘選項，好比「print」則適用於打印機

操做：覆蓋」以前的樣式

有一個重要的地方須要注意的是，保留原來佈局樣式的代碼，將新佈局的樣式代碼放置在媒介查詢中，這樣一些不支持CSS3媒介查詢的瀏覽器就能夠調用以前的佈局，同時桌面平臺上一些較老的瀏覽器的顯示也不會有什麼大問題。

如下例子，在新佈局中，咱們將側邊欄從底部移開，並讓list的部分以列表的形式顯示。代碼以下：

幫助

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

@media all and ( min-width : 800px ){    .sidebar ul{      border : none ;      padding : 0 ;    }    .sidebar ul li{      display : block ;      padding : 0 ;      border : none ;    }    h 3 .subscribe{      display : block ;    }    .sidebar ul.subscribe{      position : static ;      top : auto ;      right : auto ;      border :inherit;      color :inherit;    }    .sidebar ul.subscribe li{      border :inherit;    } }

這樣就吧側邊欄推到左邊（結合css其餘代碼，請參閱源文件），並把RSS訂閱放回到適用於桌面瀏覽器顯示的地方。你能夠用不一樣平臺瀏覽器打開源文件，並水平縮放，進行測試。

也許有人會疑惑爲何是800px，800px是否有什麼特殊之處？事實上，我認爲這有點寬。在新發布的windows7上有一個屏幕邊緣捕捉的功 能（譯者注：就是把窗口拉到兩邊，會把窗口的縮放成屏幕的一半，拉到頂上會最大化），若是把爲桌面平臺顯示的網站寬度設成600px，這樣一個在 1280px寬的屏幕下，捕捉到邊緣時不須要調整窗口大小就能正常顯示佈局。固然這只是一個例子而已，只是要清楚800px並不意味着什麼特殊值，一切都 要根據本身的須要去思考。

五、可替代的方法

方法不止一種，本文展現了媒介查詢這種實用方法以及一些只基於CSS的移動平臺網站佈局的辦法。還有如下的方法能夠聯合使用，打造移動平臺的網站佈局。

• 多個模板: 製做不一樣的模板，而後主題系統檢測用戶瀏覽器，根據不一樣瀏覽器顯示不一樣的主題。這一般是也能夠經過製做幾個不一樣的CSS文件來實現。
• 子域名: m., mobile., 和 .mobi有成爲標準的趨勢, 不一樣子域名有不一樣內容， 在避免內容重複上，和多個模板的技術差很少。
• 可變的佈局: 網站也可以設計成徹底可變佈局，不管瀏覽器窗口的大小，內容會自動適應。事實上，在這個教程裏，適用於移動平臺的樣式表，就是可變的佈局，使用媒介查詢的方式好處在於能夠複製背景並下降HTTP請求。

處理移動互聯網瀏覽的方式不少，最終多是多種方式聯合使用。不管是是使用媒介查詢或者子域名轉向的方式，要點在於提早對移動平臺的佈局進行規劃。

原文連接： Flexible, Mobile-First Layouts with CSS3