移动端布局那些事
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>
--1234wu
