自適應移動設備頁面前端注意的問題

如今移動設備愈來愈多，使用手機上網的人也愈來愈多，移動設備也成爲訪問互聯網的常見終端設置。之前咱們在編寫管理系統的時候，客戶端只須要考慮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標籤告訴瀏覽器視口寬度等於設備屏幕寬度，且不進行初始縮放。