移動端歸納
最近在項目開發過程中涉及到了移動端，現在對此進行總結。
在此次M端的開發過程中，遇到了許多問題，在此進行一次總結，希望大家在以後的開發過程
中能儘量規避類似的問題，提高開發效率和代碼質量。
一、佈局
1.移動端開頭
<meta name="viewport" content="width=device-width, initial-scale=1,
minimum-scale=1.0, maximum-scale=1.0"/>
一般在寫移動端時，會在head標籤內添加上面這個meta標籤，它的作用在於給手機端建立
一個viewport層，這樣才能更好的去展現頁面效果。比如有的手機分辨率達到了
1920*1080，這種高分辨率一般在電腦大屏中出現，那麼手機那麼小的手機，為什麼能達到
1920*1080這麼高的分辨率呢？因為他的dpi或ppi高。
註釋：dpid：ots per inch，最初用於衡量打印物上每英寸的點數密度，就是打印機可以在一
英寸內打多少個點。當dpi的概念用在計算機屏幕上時，就稱之為ppi。ppi和dpi是同一個概
念，Android比較喜歡使用dpi，IOS比較喜歡使用ppi。
1.單位
dom佈局單位的問題，移動端的佈局與PC端的佈局有所差別，在PC端我們習慣於用px設置
固定寬高的值，而移動端的重點是自適應，所以在許多地方採用的是設置百分比或者以rem
為單位來設置寬高。 寬度一般設置百分比，高度設置rem。
一定要區分清楚什麼情況下使用固定大小，什麼情況下使用自適應大小。文字類基本都使用
固定大小，圖片及背景圖片類可酌情考慮自適應大小，具體情況請結合實際，不清楚的地方
可先與同事溝通，或者與產品溝通，務必做到了解需求後再寫代碼。
當採用rem作為單位時，如果是sublime text編輯器，可以先安裝一個cssrem插件，方便自
動對rem單位進行換算。
2.彈性佈局
在移動端裡比較常見的佈局有彈性佈局，也就是display:box和boxflex;利用這兩個屬性可以
較方便的分配一行內的子元素；簡單的理解就是能夠按等分劃分元素。
例如：
https://maxiang.io/# 2/6
<ul style="display:box">
<li style="box-flex:1">1</li>
<li style="box-flex:2">2</li>
<li style="box-flex:1">1</li>
</ul>
結合上面的代碼，我們可以這樣理解，當把ul設置為彈性盒子時，則ul的三個子元素li都會被
分配各自的比重，我們可以把ul當成單位1，並被劃分為了四等分，其中第一個和最後一個li
各佔四分之一，中間的li佔二分之一。
display:box兼容寫法
display: -webkit-box;
display: -moz-box;
display: -o-box;
display: -ms-flexbox;
display: flex;
display:box兼容寫法
-moz-box-flex: 1;
-webkit-box-flex: 1;
-o-box-flex: 1;
-ms-flex: 1;
flex: 1;
3.boxsizing佈局
boxsizing佈局比較適合用在自適應場景的開發。比較常見的例如：
這種情況下，把邊框長度算入盒模型的寬度中是比較方便的。
4.css3屬性
移動端對css3的支持非常給力，除了部分屬性需要添加前綴。而且據說移動端使用css3的性
能比css2要高，所以大家優先使用css3屬性，同時css3用起來有多方便也就不需要我說了。
二、js代碼
技術選型：zepto.js+swiper.js+echarts.js+common.js
1.zepto.js
https://maxiang.io/# 4/6
Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫， 它與jquery有著類似的api。 如
果你會用jquery，那麼你也會用zepto。
正如zepto自己所說的那樣，它只是個輕量級的js庫，所以我們常用的一些jq方法它可能沒有
提供，尤其是animate動畫，當然，這個並不是特別要緊，大部分的動畫都可以直接用css3
動畫來實現，少部分有需求的動畫，可以用原生js自行定義。
2.swiper.js
swiper是一款專門針對移動端所開發的開源觸摸滑動插件，能夠滿足移動端大部分滑動特效
需求。而且swiper提供了基於zepto開發的插件，更加輕量。swiper的使用也比較方便，基礎
引用方式如下：
var swiper = new Swiper(".swiper-container", {
slidesPerView: 3,
setWrapperSize :true
});
swiper常用API:
(1) slidesPerView 設置一個屏幕內元素顯示的個數
(2) setWrapperSize 設置swiper自動計算對象的總長度
(3) direction 設置橫向或者縱向顯示
(4) pagination 設置小圖標
3.echarts.js 3.0
echarts從3.0版本開始支持移動端圖表。
4.common.js
簡單列舉common.js中的一些方法：
(1) common.backtop() 返回頂部按鈕效果
(2) common.divselect(divselectid,inputselectid,height) 模擬下拉表單
(3) common.touchList(content,num) 調用swiper，左右滑動效果
(4) common.ajax(method, type, params, callback) 異步請求的通用方法
(5) common.getDate(data) 根據時間戳(秒)生成時間 1436412956699 > 20150709 12:00
5.如何異步獲取並渲染數據
var example = function(){
//定義了一個對象
}
（1）方法入口，例如：
sendHouse:function(){
var n = 1,
nickname,
typeid;
nickname = $(".nickname").text();
typeid = $(".typeid").val();
//調用發送異步請求的方法
example.sendHouse();
//除了調用請求方法，也可以在這裡寫一些相關的操作事件，例如點擊加載更多
$(".btn-more").click(function(){
n++;
example.sendHouse();
})
}
（2）發送異步請求，例如：
sendHouse:function(nickname,typeid,pageIndex){
//調用通用異步請求方法
common.ajax("Image.s.List","post",{buildnickname:nickname||"bl
sd",typeid: Typeid||"0",PageSize: pagesize||"5",Pageindex: pageinde
x||"0",Requrl:"http://192.168.100.101:8088"},function(res,success){
if(example.loadHouseInfo && res[success]){
example.loadHouseInfo(res[success]);
}else{
console.log("沒有提供函數調用...");
}
})
}
相關推薦
