1,移動端的常見開發方式:
響應式： 一套代碼可以兼容移動端，pc端，pad端。所以說代碼不會特別復雜，內容也不會特別的多，尤其是動畫
自適應：根據不同的設備去加載不同的代碼，pad一套，pc一套，phone一套。最常見一種
媒體查詢: 百分比，寫自適應的時候就不需要考慮太多,想要做的更細膩，就必須把媒體查詢寫的更細化.
2,移動端的滑動事件(touch):
touchstart :按下;
touchend: 抬起;
touchmove: 移動;
而每個觸摸事件都包括了三個觸摸列表，每個列表里包含了對應的一系列觸摸點（用來實現多點觸控）：
touches：當前位於屏幕上的所有手指的列表。
targetTouches：位於當前DOM元素上手指的列表。
changedTouches：涉及當前事件手指的列表。
每個觸摸點由包含了如下觸摸信息（常用）：
identifier：一個數值，唯一標識觸摸會話（touch session）中的當前手指。一般為從0開始的流水號（android4.1，uc）
target：DOM元素，是動作所針對的目標。
pageX/pageX/clientX/clientY/screenX/screenY：一個數值，動作在屏幕上發生的位置（page包含滾動距離,client不包含滾動距離，screen則以屏幕為基准）。
radiusX/radiusY/rotationAngle：畫出大約相當於手指形狀的橢圓形，分別為橢圓形的兩個半徑和旋轉角度。初步測試瀏覽器不支持，好在功能不常用.
首先為了防止事件觸發默認行為，我們需要去禁止，安全的禁止方法：
// 判斷默認行為是否可以被禁用
if (e.cancelable) { // 判斷默認行為是否已經被禁用
if (!e.defaultPrevented) { e.preventDefault(); } }
demo:
單指拖動:
/*單指拖動*/
var obj = document.getElementById('id'); obj.addEventListener('touchmove', function(event) { // 如果這個元素的位置內只有一個手指的話
if (event.targetTouches.length == 1) { event.preventDefault();// 阻止瀏覽器默認事件，重要
var touch = event.targetTouches[0]; // 把元素放在手指所在的位置
obj.style.left = touch.pageX-50 + 'px'; obj.style.top = touch.pageY-50 + 'px'; } }, false);
四個方向滑動:
<script>var d1 = document.getElementById("d1"); var startX; var startY; var endX; var endY; document.addEventListener("touchstart",function(event){ var event = event || window.event; startX = event.touches[0].pageX; startY = event.touches[0].pageY; // console.log('按下')
}) document.addEventListener("touchend",function(event){ var event = event || window.event; endX = event.changedTouches[0].pageX; endY = event.changedTouches[0].pageY; var X = endX - startX; var Y = endY - startY; var absX = Math.abs(X) > Math.abs(Y); var absY = Math.abs(Y) > Math.abs(X); if(X > 0 && absX){ console.log('右划') }else if(X < 0 && absX){ console.log('左划') }else if(Y > 0 && absY){ console.log('下划') }else if(Y < 0 && absY){ console.log('上划') } // console.log("抬起")
}) document.addEventListener("touchmove",function(){ // console.log('移動')
}) </script>
jq寫法demo:
$("body").on("touchstart", function(e) { e.preventDefault(); startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY; }); $("body").on("touchmove", function(e) { e.preventDefault(); moveEndX = e.originalEvent.changedTouches[0].pageX, moveEndY = e.originalEvent.changedTouches[0].pageY, X = moveEndX - startX, Y = moveEndY - startY; if ( X > 0 ) { alert('向左滑動'); } });
3,媒體查詢:
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>移動端布局</title>
<style>
/*目前手機屏幕最小的為320px，IP5的*/ html{
/*font-size: 62.5%;*/ /*瀏覽器的默認字體大小是16px，62.5就是10px，方便計算*/ font-size: 100px;
} @media screen and (max-width: 319px){ html{ display: none;
} } @media screen and (min-width: 320px) and (max-width: 330px){ html{ font-size: 110px;
} } @media screen and (min-width: 331px) and (max-width: 340px){ html{ font-size: 120px;
} } /*想寫的更好看，就把媒體查詢寫的更細膩即可*/
</style>
</head>
1,推薦全部使用rem布局，容器使用百分比;em是相對父級的，rem是相對根元素的(html的 font-size值)
2.視口必須的:(psd和實際屏幕為1：1時使用)
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
3.移動端的時候，border不要寫成相對單位
4.注意手機的像素問題：
iphone4為例：
物理像素 ：640px*960px 添加了視口就不需要去管了
邏輯像素 ：320*480px 以實際的開發為標准
像素比 2
4，js實現移動端視口(psd和實際屏幕比例不為1：1時使用)
<script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
//根據psd圖的尺寸修改fontsize,psd寬度為320px時docEl.style.fontSize =100 * (clientWidth / 320) + 'px';
//根據psd圖的尺寸修改fontsize,psd寬度為640px時docEl.style.fontSize =50* (clientWidth / 320) + 'px';
//width增大就要縮小對應比例的fontsize
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>