自適應移動設備頁面的設計

　　現在移動設備越來越多，使用手機上網的人也越來越多，移動設備也成為訪問互聯網的常見終端設置。以前我們在編寫管理系統的時候，客戶端只需要考慮PC機桌面設備，現在則必須要考慮到移動終端設備了。

　　移動終端設備的屏幕分辨率很多都不一樣，手機就分很多種大小的，然后還有一些平板電腦，如ipad,ipad迷你，等等，大小很難統一， 瀏覽器也各式各樣，這使得做移動設備的客戶端界面有了一定的困難，總不不能每種尺寸的都做上一遍。

　　于是很多電商公司做了3G版，觸摸屏版，普通版，電腦版等等。每種版本按大體的規則做了一遍。

　　手機的屏幕比較小，寬度通常是600像素以下。老式一些的手機用普通版，屏幕寬度300px以下，多以文字連接為主。手機帶觸摸屏的，屏幕要稍微大一些，操作界面又多以圖片觸摸為主。還有一些ipad等的屏幕就更大了，可以做更多內容的展示。

　　電商網站主要靠這些終端設備來完成銷售，為了讓用戶使用各種設置都有良好的體驗，促進訂購，電商公司不惜分開做多個版本。

　　我們做企業管理軟件的，頁面展示的信息不是那么多時，可以將所有移動設備的終端頁面做成標準的版本，就一套系統，然后根據屏幕的大小自適應，以后維護也就這一套。

　　自適應頁面的設計從開始就有很多需要注意的：

　　1.頁面中關乎布局的元素都不設置絕對的寬和高，都按百分比來設置。

　　2.字體也使用相對大小的字體

　　如：

　　body{font: normal 100%;} 字體大小事頁面默認大小的100%，即16像素。

　　h2 {font-size:1.5em} h2標題的文字大小事默認字體大小的1.1倍。

　　3.用div+css+浮動 來布局  各個盒子的位置用浮動的，不是固定不變的。

　　如：

　　.content{float:right;75%;}

　　.sidebar{float:left;width:20%;}

　　用百分比 + 浮動，當屏幕太窄，放不下兩個盒子的時候，后面的元素會自動移動到前面元素的下方，不會使得頁面產生橫向的滾動條。

　　4.盡量不要使用絕對定位，即position:absolute的定位。

　　5.根據瀏覽器的版本做一些css的處理

　　6.根據屏幕的寬度加載相應的css文件

　　如：

　　<link rel="stylesheet" type="text/css"  media="screen and (max-device-width: 400px)"  href="tinyScreen.css" />

　　屏幕寬度小于400像素，就加載tinyScree.css文件；

　　<link rel="stylesheet" type="text/css"  media="screen and (min-width: 400px) and (max-device-width: 600px)"  href="smallScreen.css" />

　　屏幕寬度在400像素 到 600像素之間，就加載smallScreen.css文件

　　@import url("tinyScreen.css") screen and (max-device-width: 400px);

　　在現有CSS文件中加載。

　　7.css文件中，根據分辨率設置不同的css風格

　　@media screen and (max-device-width: 400px) {

　　.column  {float: none;width:auto;}

　　.sidebar {display:none;}

　　}

　　屏幕寬度小于400像素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。

　　@media screen and(min-width:400px){

　　.content {width:65%;}

　　.sidebar {width:30%;}

　　}

　　屏幕大于400像素，content占65%，sidebar占30%。

　　8.圖片自動縮放，自適應大小

　　如：img{max-width:100%;}

　　9.設置meta標簽

　　如：<meta name="viewport" content="width=device-width, initial-scale=1.0">

　　viewport meta標簽告訴瀏覽器視口寬度等于設備屏幕寬度，且不進行初始縮放。

　　當然程序員理想的狀態是做成一套，但往往事與愿違，我們至少需要做成PC機桌面設備一套，手機版觸摸屏的一套，ipad3G版一套。在這三種的系統中再做一些各自小范圍的自適應。