自適應行動裝置頁面前端注意的問題

標籤：style   color   io   os   使用   ar   strong   檔案   sp   

現在行動裝置越來越多，使用手機上網的人也越來越多，行動裝置也成為訪問互連網的常見終端設定。以前我們在編寫管理系統的時候，用戶端只需要考慮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標籤告訴瀏覽器視口寬度等於裝置螢幕寬度，且不進行初始縮放。

自適應行動裝置頁面前端注意的問題